Skip to content

C
coopwire-hypothesis
Commit b0573ec4 authored by Randall Leeds's avatar Randall Leeds
Browse files
Options

Merge pull request #1418 from hypothesis/markdown 

Add markdown preview, add markdown help icon, and adjust styles for markdown output
parents 21e95218 09922b0c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 357 additions and 285 deletions
h/static/fonts/h.eot 100644 → 100755
View file @ b0573ec4
No preview for this file type
h/static/fonts/h.svg 100644 → 100755
View file @ b0573ec4
......@@ -78,6 +78,7 @@
<glyph unicode="&#xe60b;" d="M421.647 480h-361.412c-33.13 0-60.236-30.118-60.236-66.259v-228.894c0-36.141 27.106-66.259 60.236-66.259h30.118v-150.588l144.565 150.588h186.73c33.13 0 60.236 30.118 60.236 66.259v228.894c0 36.141-27.106 66.259-60.236 66.259zM361.412 269.177h-90.353v-90.353h-60.236v90.353h-90.353v60.236h90.353v90.353h60.236v-90.353h90.353v-60.236z" />
<glyph unicode="&#xe60c;" d="M480 64l-124.563 124.563c17.781 29.031 28.563 62.859 28.563 99.438 0 106.015-86 192-192 192-106.016 0-192-85.985-192-192 0-106 85.984-192 192-192 36.578 0 70.406 10.781 99.438 28.5l124.563-124.5c8.75-8.75 23.25-8.688 32 0l32 32c8.75 8.75 8.75 23.25 0 32zM192 160c-70.688 0-128 57.313-128 128s57.313 128 128 128 128-57.313 128-128-57.313-128-128-128z" horiz-adv-x="487" />
<glyph unicode="&#xe60d;" d="M0 272v-96c0-8.836 7.164-16 16-16h480c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16h-480c-8.836 0-16-7.164-16-16z" />
<glyph unicode="&#xe60e;" d="M475.077 384h-438.154c-20.36 0-36.923-16.563-36.923-36.923v-246.154c0-20.361 16.564-36.923 36.923-36.923h438.154c20.361 0 36.923 16.563 36.923 36.923v246.154c0 20.36-16.563 36.923-36.923 36.923zM288 128.063l-64-0.063v96l-48-61.538-48 61.538v-96h-64v192h64l48-64 48 64 64 0.063v-192zM383.546 112.063l-79.546 111.938h48v96h64v-96h48l-80.454-111.938z" />
<glyph unicode="&#xf000;" d="M0 480l512-512h-512z" />
<glyph unicode="&#xf06e;" d="M475.429 205.714q-43.429 67.429-108.857 100.857 17.429-29.714 17.429-64.286 0-52.857-37.571-90.429t-90.429-37.571-90.429 37.571-37.571 90.429q0 34.571 17.429 64.286-65.429-33.429-108.857-100.857 38-58.571 95.286-93.286t124.143-34.714 124.143 34.714 95.286 93.286zM269.714 315.429q0 5.714-4 9.714t-9.714 4q-35.714 0-61.286-25.571t-25.571-61.286q0-5.714 4-9.714t9.714-4 9.714 4 4 9.714q0 24.571 17.429 42t42 17.429q5.714 0 9.714 4t4 9.714zM512 205.714q0-9.714-5.714-19.714-40-65.714-107.571-105.286t-142.714-39.571-142.714 39.714-107.571 105.143q-5.714 10-5.714 19.714t5.714 19.714q40 65.429 107.571 105.143t142.714 39.714 142.714-39.714 107.571-105.143q5.714-10 5.714-19.714z" />
<glyph unicode="&#xf070;" d="M158.571 98.571l22.286 40.286q-24.857 18-38.857 45.429t-14 58q0 34.571 17.429 64.286-65.429-33.429-108.857-100.857 47.714-73.714 122-107.143zM269.714 315.429q0 5.714-4 9.714t-9.714 4q-35.714 0-61.286-25.571t-25.571-61.286q0-5.714 4-9.714t9.714-4 9.714 4 4 9.714q0 24.571 17.429 42t42 17.429q5.714 0 9.714 4t4 9.714zM373.429 370q0-2-0.286-2.571-30-53.714-90-161.714t-90.286-162l-14-25.429q-2.857-4.571-8-4.571-3.429 0-38.286 20-4.571 2.857-4.571 8 0 3.429 12.571 24.857-40.857 18.571-75.286 49.429t-59.571 70q-5.714 8.857-5.714 19.714t5.714 19.714q43.714 67.143 108.571 106t141.714 38.857q25.429 0 51.429-4.857l15.429 27.714q2.857 4.571 8 4.571 1.429 0 5.143-1.714t8.857-4.429 9.429-5.286 9-5.286 5.571-3.286q4.571-2.857 4.571-7.714zM384 242.286q0-39.714-22.571-72.429t-59.714-47l80 143.429q2.286-12.857 2.286-24zM512 205.714q0-10-5.714-19.714-11.143-18.286-31.143-41.429-42.857-49.143-99.286-76.286t-119.857-27.143l21.143 37.714q60.571 5.143 112.143 39.143t86.143 87.714q-32.857 51.143-80.571 84l18 32q27.143-18.286 52.143-43.714t41.286-52.571q5.714-9.714 5.714-19.714z" />
......
h/static/fonts/h.ttf 100644 → 100755
View file @ b0573ec4
No preview for this file type
h/static/fonts/h.woff 100644 → 100755
View file @ b0573ec4
No preview for this file type
h/static/fonts/selection.json 100644 → 100755
View file @ b0573ec4
This diff is collapsed.
h/static/icomoon.css
View file @ b0573ec4
@font-face {
font-family: 'h';
src:url('fonts/h.eot?-f82t8p');
src:url('fonts/h.eot?#iefix-f82t8p') format('embedded-opentype'),
url('fonts/h.woff?-f82t8p') format('woff'),
url('fonts/h.ttf?-f82t8p') format('truetype'),
url('fonts/h.svg?-f82t8p#h') format('svg');
src:url('fonts/h.eot?-vhf443');
src:url('fonts/h.eot?#iefix-vhf443') format('embedded-opentype'),
url('fonts/h.woff?-vhf443') format('woff'),
url('fonts/h.ttf?-vhf443') format('truetype'),
url('fonts/h.svg?-vhf443#h') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -23,6 +23,9 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-markdown:before {
content: "\e60e";
}
.icon-minus:before {
content: "\e60d";
}
......
h/static/scripts/directives/annotation.coffee
View file @ b0573ec4
......@@ -29,6 +29,7 @@ class Annotation
$scope.action = 'create'
$scope.editing = false
$scope.preview = 'no'
if model.document and model.target.length
domain = extractURIComponent(model.uri, 'hostname')
......
h/static/styles/annotations.scss 0 → 100644
View file @ b0573ec4
//ANNOTATION////////////////////////////////
//This is for everything that is formatted as an annotation.
.annotation {
@include pie-clearfix;
font-family: $sans-font-family;
position: relative;
&:hover fuzzytime a, &:hover .reply-count {
color: $link-color;
}
.magicontrol.dropdown {
top: 4px;
}
fuzzytime {
line-height: 2;
a {
color: $text-color;
&:hover { color: $link-color-hover; }
&:focus { outline: 0; }
}
}
.reply-count {
color: $text-color;
&:hover { color: $link-color-hover; }
&:focus { outline: 0; }
}
.user {
font-weight: bold;
font-size: 1.1em;
&:hover {
color: $link-color-hover;
cursor: pointer;
text-decoration: underline;
}
}
// This class applies to the markdown rendered annotation body.
.styled-text {
p, h1, h2, h3, h4, h5, h6, ol, ul, img, pre, blockquote {
margin: 0 0 .25em 0;
}
ol {
list-style-type: decimal;
list-style-position:inside;
padding-left: 1.5em;
}
ul {
list-style-type: disc;
list-style-position:inside;
padding-left: 1.5em;
}
img {
display: block;
max-width: 100%;
}
textarea {
min-height: 8em;
width: 100%;
resize: vertical;
}
code {
font-family: monospace;
}
pre code {
padding: 5px;
display: block;
background-color: $gray-lighter;
border-radius: .2em;
}
blockquote {
@include quote;
}
}
.buttonbar {
@include pie-clearfix;
margin: .25em 0;
.btn {
margin-right: .5em;
}
}
.tip {
@extend .small;
float: right;
}
.quote {
font-style: italic
}
}
// Temporary hack until sidebar and displayer are unified
.annotation-displayer {
.user {
&:hover {
color: $link-color-hover;
cursor: pointer;
text-decoration: underline;
}
}
}
//EXCERPT////////////////////////////////
.excerpt {
margin-bottom: 1em;
position: relative;
.annotation-quote {
margin-bottom: 0;
}
.more, .less {
font-size: .9em;
font-family: $sans-font-family;
display: block;
text-align: right;
}
}
.annotation-quote {
@include quote;
}
//MAGICONTROL////////////////////////////////
.magicontrol {
@include transition(opacity);
@include transition-duration(.15s);
margin: 0 .4em;
opacity: 0;
&.open, :hover > & {
@include transition-duration(.15s);
opacity: 1;
}
}
.share-dialog {
display: none;
a {
float: left;
line-height: 1.4;
margin-right: .5em;
vertical-align: middle;
}
div {
overflow: hidden;
}
input {
padding: 0;
width: 100%;
}
}
.stream-list {
& > * {
margin-bottom: .72em;
}
.card-emphasis {
@include box-shadow(6px 6px 8px -2px $gray-light);
}
}
\ No newline at end of file
h/static/styles/app.scss
View file @ b0573ec4
......@@ -28,10 +28,17 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
ol {
list-style-type: decimal;
padding-left: 3em;
margin-left: -1.5em;
}
li + li {
margin-top: 1em;
.auth {
padding: 1em;
.nav-tabs {
border: 1px none $gray-lighter;
border-bottom-style: solid;
padding: 0 0 1.1em;
& > li {
a { padding-bottom: .231em;}
}
}
}
......
h/static/styles/base.scss
View file @ b0573ec4
......@@ -146,6 +146,15 @@ $input-border-radius: 2px;
}
}
@mixin quote {
color: $gray;
font-family: $serif-font-family;
font-size: 1em;
margin-bottom: 1em;
padding: 0 .615em;
border-left: 3px solid $gray-lighter;
}
//NOISE///////////
//Provides the noise background
.noise {
......
h/static/styles/common.scss
View file @ b0573ec4
@import 'compass/typography/text/force-wrap';
@import 'compass/layout/stretching';
@import 'base';
$base-font-size: 16px;
$base-line-height: 26px;
$sans-font-family: "Source Sans Pro", $sans-font-family;
$serif-font-family: "Merriweather", $serif-font-family;
$headings-color: $text-color;
@import 'annotations';
@import 'forms';
@import 'spinner';
@import 'responsive';
......@@ -11,13 +18,6 @@
@import 'tags-input';
$base-font-size: 16px;
$base-line-height: 26px;
$sans-font-family: "Source Sans Pro", $sans-font-family;
$serif-font-family: "Merriweather", $serif-font-family;
$headings-color: $text-color;
//ELEMENT STYLES////////////////////////////////
a {
color: $link-color;
......@@ -37,7 +37,7 @@ p {
hyphens: auto;
& + p {
margin: 2em 0 0;
margin: 1em 0 0;
}
}
......@@ -82,20 +82,34 @@ h2 {
}
h3 {
font-size: 1.17em;
font-size: 1.25em;
margin: .83em 0;
}
h4 {
font-size: 1.15em;
margin: .83em 0;
}
h5 {
font-size: .83em;
font-size: 1.05em;
margin: 1.5em 0;
}
h6 {
font-size: .75em;
font-size: 1em;
margin: 1.67em 0;
}
//PAPER////////////////////////////////
//Provides the white background upon which items sit
.paper {
background: $white;
border: solid 1px $gray-lighter;
border-radius: 2px;
padding: 1em;
}
//MCRANDOM////////////////////////////////
.alert-block {
......@@ -184,34 +198,6 @@ h6 {
}
//EXCERPT////////////////////////////////
.excerpt {
margin-bottom: 1em;
position: relative;
.annotation-quote {
margin-bottom: 0;
}
.more, .less {
font-size: .9em;
font-family: $sans-font-family;
display: block;
text-align: right;
}
}
.annotation-quote {
color: $gray;
font-family: $serif-font-family;
font-size: 1em;
margin-bottom: 1em;
padding: 0 .615em;
border-left: 3px solid $gray-lighter;
}
//DROPDOWNS////////////////////////////////
.dropdown {
position: relative;
......@@ -334,9 +320,7 @@ h6 {
//TABS////////////////////////////////
.nav-tabs {
border: 1px none $gray-lighter;
border-bottom-style: solid;
padding: 0.9em 1em 1.1em;
margin-bottom: .7em;
& > li {
display: inline-block;
......@@ -348,14 +332,18 @@ h6 {
color: $gray-dark;
cursor: pointer;
border-bottom: 3px solid transparent;
padding-left: 2 / 13 * 1em;
padding-right: 2 / 13 * 1em;
padding-bottom: 3 / 13 * 1em;
padding-left: .153em;
padding-right: .153em;
padding-bottom: .076em;
&:hover {
color: $link-color-hover;
}
}
&:active a {
position: relative;
top: 1 / 13 * 1em;
top: .076em;
}
......@@ -369,18 +357,27 @@ h6 {
&:before {
content: "/";
margin: 0 1em;
margin: 0 .75em;
}
&:first-child:before {
content: none;
}
a.icon-markdown {
color: $gray-lighter;
font-size: 16px;
position: relative;
top: .15em;
left: .1em;
font-family: h;
font-weight: unset;
}
}
}
.tab-content {
line-height: 1.4;
padding: 1em;
.tab-pane {
display: none;
......@@ -391,157 +388,6 @@ h6 {
}
//PAPER////////////////////////////////
//Provides the white background upon which items sit
.paper {
background: $white;
border: solid 1px $gray-lighter;
border-radius: 2px;
padding: 1em;
}
//ANNOTATION////////////////////////////////
//This is for everything that is formatted as an annotation.
.annotation {
@include pie-clearfix;
font-family: $sans-font-family;
position: relative;
&:hover fuzzytime a, &:hover .reply-count {
color: $link-color;
}
.magicontrol.dropdown {
top: 4px;
}
fuzzytime {
line-height: 2;
a {
color: $text-color;
&:hover { color: $link-color-hover; }
&:focus { outline: 0; }
}
}
.reply-count {
color: $text-color;
&:hover { color: $link-color-hover; }
&:focus { outline: 0; }
}
.user {
font-weight: bold;
font-size: 1.1em;
&:hover {
color: $link-color-hover;
cursor: pointer;
text-decoration: underline;
}
}
.body {
div {
clear: both;
margin: .25em 0;
#{elements-of-type(inline)}, #{headings()}, p, li {
@include force-wrap;
}
ol, ul {
padding-left: 1.25em;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
}
textarea {
min-height: 8em;
width: 100%;
}
}
.buttonbar {
@include pie-clearfix;
margin: .25em 0;
.btn {
margin-right: .5em;
}
}
.tip {
@extend .small;
float: right;
}
.quote {
font-style: italic
}
}
// Temporary hack until sidebar and displayer are unified
.annotation-displayer {
.user {
&:hover {
color: $link-color-hover;
cursor: pointer;
text-decoration: underline;
}
}
}
//MAGICONTROL////////////////////////////////
.magicontrol {
@include transition(opacity);
@include transition-duration(.15s);
margin: 0 .4em;
opacity: 0;
&.open, :hover > & {
@include transition-duration(.15s);
opacity: 1;
}
}
.share-dialog {
display: none;
a {
float: left;
line-height: 1.4;
margin-right: .5em;
vertical-align: middle;
}
div {
overflow: hidden;
}
input {
padding: 0;
width: 100%;
}
}
.stream-list {
& > * {
margin-bottom: .72em;
}
.card-emphasis {
@include box-shadow(6px 6px 8px -2px $gray-light);
}
}
//SEARCH HIGHLIGHTS////////////////////////////////
.search-hl-active {
background: $highlight-color;
......@@ -560,7 +406,6 @@ h6 {
}
}
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
// View and Sort tabs ////////////////////
.viewsort {
......
h/static/styles/forms.scss
View file @ b0573ec4
......@@ -157,6 +157,7 @@
.form-actions {
@include pie-clearfix;
margin-top: 10px;
}
.form-actions-message {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment