twisterarmy
/
twister-html
mirror of https://github.com/twisterarmy/twister-html.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

text markdown with `monospace`

master
Simon Grim 9 years ago
parent
f6d8e6a380
commit
ad7c95308c
5 changed files with 250 additions and 233 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      css/style.css
  2. 7
      js/twister_formatpost.js
  3. 9
      theme_calm/css/style.css
  4. 4
      theme_nin/css/style.css
  5. 454
      theme_nin/sass/_postboard.sass

9
css/style.css
Unescape View File

@ -1025,12 +1025,17 @@ ol.toptrends-list {
opacity: .5; opacity: .5;
text-decoration: none; text-decoration: none;
} }
.post-text
{ .post-text {
font-size: 13px; font-size: 13px;
margin: 2px 10px 4px 60px; margin: 2px 10px 4px 60px;
word-wrap: break-word; word-wrap: break-word;
} }
.post-text samp {
background: #f0efcc;
}
.post-context .post-context
{ {
font-size: 11px; font-size: 11px;

7
js/twister_formatpost.js
Unescape View File

@ -366,7 +366,7 @@ function htmlFormatMsg(msg, mentions) {
var stopCharsLeft = '<' + whiteSpaces; var stopCharsLeft = '<' + whiteSpaces;
var stopCharsRight = '>' + whiteSpaces; var stopCharsRight = '>' + whiteSpaces;
var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing; var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing;
var stopCharsMarkDown = '~_-+=<>&' + stopCharsTrailing + whiteSpaces; var stopCharsMarkDown = '~_-`+=<>&' + stopCharsTrailing + whiteSpaces;
var j, str, strEncoded; var j, str, strEncoded;
var html = []; var html = [];
@ -485,11 +485,12 @@ function htmlFormatMsg(msg, mentions) {
} }
} }
msg = markdown(markdown(markdown(markdown(msg, msg = markdown(markdown(markdown(markdown(markdown(msg,
'*', 'b'), // bold '*', 'b'), // bold
'~', 'i'), // italic '~', 'i'), // italic
'_', 'u'), // underlined '_', 'u'), // underlined
'-', 's') // striketrough '-', 's'), // striketrough
'`', 'samp') // kind of monospace
.replace(/\(\d{1,2}\/\d{1,2}\)$/, htmlSplitCounter) .replace(/\(\d{1,2}\/\d{1,2}\)$/, htmlSplitCounter)
.replace(/&(?!lt;|gt;)/g, '&amp;') // FIXME in many cases there is no need to escape ampersand in HTML 5 .replace(/&(?!lt;|gt;)/g, '&amp;') // FIXME in many cases there is no need to escape ampersand in HTML 5
.replace(/"/g, '&quot;') .replace(/"/g, '&quot;')

9
theme_calm/css/style.css
Unescape View File

@ -1230,12 +1230,17 @@ textarea.splited-post {
text-decoration: none; text-decoration: none;
color: #43464d; color: #43464d;
} }
.post-text
{ .post-text {
font-size: 13px; font-size: 13px;
margin: 2px 10px 4px 60px; margin: 2px 10px 4px 60px;
word-wrap: break-word; word-wrap: break-word;
} }
.post-text samp {
background: #eee;
}
.post-context .post-context
{ {
font-size: 11px; font-size: 11px;

4
theme_nin/css/style.css
Unescape View File

@ -878,6 +878,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
padding: 0; padding: 0;
} }
.post-text samp {
background: #eee;
}
/* line 138, ../sass/_postboard.sass */ /* line 138, ../sass/_postboard.sass */
.post-context { .post-context {
font-size: 11px; font-size: 11px;

454
theme_nin/sass/_postboard.sass
Unescape View File

@ -1,311 +1,313 @@
/************* POST BOARD *************/ /************* POST BOARD *************/
.postboard, .following .postboard, .following
padding-left: $column-width + $gut-width padding-left: $column-width + $gut-width
+box-sizing(border-box) +box-sizing(border-box)
width: $postboard-width width: $postboard-width
@extend .clear-fix @extend .clear-fix
.postboard-posts .postboard-posts
position: relative position: relative
z-index: 1 z-index: 1
clear: both clear: both
.postboard-news .postboard-news
font-size: 12px font-size: 12px
box-sizing: border-box box-sizing: border-box
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
cursor: pointer cursor: pointer
padding: 10px padding: 10px
font-weight: 900 font-weight: 900
clear: both clear: both
color: white color: white
text-align: center text-align: center
text-transform: uppercase text-transform: uppercase
background: $main-color-color background: $main-color-color
.post, .following li .post, .following li
background: $bloc-background-color background: $bloc-background-color
box-sizing: border-box box-sizing: border-box
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
transition: margin .4s ease-out transition: margin .4s ease-out
-moz-transition: margin .4s ease-out -moz-transition: margin .4s ease-out
.post, .original.post, .post.open .post, .original.post, .post.open
background: $bloc-background-color background: $bloc-background-color
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
.module.open .module.open
.post .post
color: darken($defaut-font-color, 15%) color: darken($defaut-font-color, 15%)
.post:hover .post:hover
color: darken($defaut-font-color, 15%) color: darken($defaut-font-color, 15%)
.post-data .post-data
padding: 10px padding: 10px
.post.open .post.open
.original, .related .original, .related
margin-bottom: 1px margin-bottom: 1px
.postboard-posts > .post .postboard-posts > .post
&.open &.open
margin-top: 20px margin-top: 20px
margin-bottom: 20px margin-bottom: 20px
&:after &:after
content: "" content: ""
position: absolute position: absolute
right: 0 right: 0
top: 0 top: 0
width: 0 width: 0
height: 100% height: 100%
transition: all .2s linear transition: all .2s linear
&.open:after &.open:after
width: 5px width: 5px
.post:hover .post:hover
cursor: pointer cursor: pointer
.open .open
background: none background: none
&:hover &:hover
background: none background: none
.post-photo .post-photo
margin: 0 margin: 0
display: inline-block display: inline-block
float: left float: left
vertical-align: middle vertical-align: middle
width: 48px width: 48px
height: 48px height: 48px
overflow: hidden overflow: hidden
img img
width: 100% width: 100%
height: 100% height: 100%
.post-info-name .post-info-name
font-weight: 700 font-weight: 700
font-size: 1em font-size: 1em
line-height: 14px line-height: 14px
color: inherit color: inherit
text-decoration: none text-decoration: none
display: inline-block display: inline-block
padding-left: 10px padding-left: 10px
float: left float: left
.post-info-name:hover .post-info-name:hover
text-decoration: none text-decoration: none
color: $main-color-light color: $main-color-light
.post-info-tag .post-info-tag
font-size: 12px font-size: 12px
opacity: .6 opacity: .6
margin-top: 4px margin-top: 4px
display: inline-block display: inline-block
.post-info-time .post-info-time
float: right float: right
font-size: 11px font-size: 11px
line-height: 14px line-height: 14px
text-decoration: none text-decoration: none
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-text .post-text
margin: 0 0 0 58px margin: 0 0 0 58px
word-wrap: break-word word-wrap: break-word
min-height: 25px min-height: 25px
padding: 0 padding: 0
samp
background: #eee
.post-context .post-context
font-size: 11px font-size: 11px
line-height: 11px line-height: 11px
margin: 0 0 1em 0 margin: 0 0 1em 0
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
span span
@extend .icon-twistagain @extend .icon-twistagain
@extend .extend-icon @extend .extend-icon
&:before &:before
display: block display: block
float: left float: left
background: $main-color-color background: $main-color-color
text-align: center text-align: center
padding: 1px 2px 2px 2px padding: 1px 2px 2px 2px
line-height: 9px line-height: 9px
font-size: 9px font-size: 9px
+border-radius(3px) +border-radius(3px)
color: white color: white
margin-right: .4em margin-right: .4em
.mini-screen-name .mini-screen-name
font-size: 13px font-size: 13px
color: $dark-grey color: $dark-grey
.post-retransmited-icon .post-retransmited-icon
display: none display: none
.post-interactions .post-interactions
margin: 10px 0 3px 0 margin: 10px 0 3px 0
text-align: right text-align: right
height: 12px height: 12px
line-height: 12px line-height: 12px
span span
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
cursor: pointer cursor: pointer
font-size: 12px font-size: 12px
line-height: 12px line-height: 12px
.post-expand .post-expand
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
cursor: pointer cursor: pointer
font-size: 12px font-size: 12px
position: absolute position: absolute
left: 10px left: 10px
bottom: 10px bottom: 10px
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-reply .post-reply
@extend .extend-icon @extend .extend-icon
@extend .icon-comment @extend .icon-comment
.post-propagate .post-propagate
@extend .extend-icon @extend .extend-icon
@extend .icon-twistagain @extend .icon-twistagain
.post-favorite .post-favorite
display: none!important display: none!important
@extend .extend-icon @extend .extend-icon
@extend .icon-star @extend .icon-star
.post .show-more .post .show-more
display: inline-block display: inline-block
float: right float: right
font-size: 12px font-size: 12px
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
@extend .extend-icon @extend .extend-icon
@extend .icon-chat @extend .icon-chat
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.expanded-content.show-pic .expanded-content.show-pic
display: block display: block
.expanded-post .expanded-post
.post-expand, .post-reply, .post-propagate, .post-favorite .post-expand, .post-reply, .post-propagate, .post-favorite
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.related .post-expand .related .post-expand
display: none display: none
margin: 0 margin: 0
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite
padding-left: 10px padding-left: 10px
display: none display: none
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover .post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite
display: inline-block display: inline-block
.open .related .open .related
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite
display: none!important display: none!important
&:hover &:hover
.post-reply, .post-propagate/*, .post-favorite*/ .post-reply, .post-propagate/*, .post-favorite*/
display: inline-block!important display: inline-block!important
.post-reply:hover, .post-propagate:hover, .post-favorite:hover .post-reply:hover, .post-propagate:hover, .post-favorite:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.expanded-content .expanded-content
display: none display: none
padding: 5px 5px 0 5px padding: 5px 5px 0 5px
@extend .clear-fix @extend .clear-fix
.image-preview .image-preview
width: 100% width: 100%
display: block display: block
margin: auto margin: auto
.preview-container .preview-container
max-height: 500px max-height: 500px
width: 100% width: 100%
text-align: center text-align: center
overflow-y: auto overflow-y: auto
background: black background: black
.post-stats .post-stats
float: left float: left
li li
display: inline-block display: inline-block
&.stat-count &.stat-count
font-weight: 700 font-weight: 700
font-size: 11px font-size: 11px
float: left float: left
line-height: 20px line-height: 20px
color: llighten($dark-grey,30%) color: llighten($dark-grey,30%)
span:last-child span:last-child
padding-right: 5px padding-right: 5px
a a
position: relative position: relative
text-decoration: none text-decoration: none
display: inline-block display: inline-block
width: 20px width: 20px
height: 20px height: 20px
margin: 0 1px 0 0 margin: 0 1px 0 0
img img
width: 20px width: 20px
height: 20px height: 20px
.user-name-tooltip .user-name-tooltip
display: none display: none
position: absolute position: absolute
background: lighten($main-color-dark,3%) background: lighten($main-color-dark,3%)
font-size: 12px font-size: 12px
white-space: nowrap white-space: nowrap
padding: 3px 5px padding: 3px 5px
color: #fff color: #fff
top: -42px top: -42px
left: 0px left: 0px
&:after &:after
content: "" content: ""
position: absolute position: absolute
width: 0 width: 0
left: 4px left: 4px
bottom: -5px bottom: -5px
border-top: solid 5px lighten($main-color-dark,3%) border-top: solid 5px lighten($main-color-dark,3%)
border-left: solid 5px transparent border-left: solid 5px transparent
border-right: solid 5px transparent border-right: solid 5px transparent
.post-stats a:hover .user-name-tooltip .post-stats a:hover .user-name-tooltip
display: inline-block display: inline-block
.post-replies .sub-replies .post-replies .sub-replies
border-left: solid 3px $main-color-color border-left: solid 3px $main-color-color
margin-left: 1px margin-left: 1px
@ -313,16 +315,16 @@
/* MODAL */ /* MODAL */
.modal-content .modal-content
.postboard .postboard
width: auto!important width: auto!important
padding: 0 padding: 0
clear: none!important clear: none!important
position: relative position: relative
.post-text .post-text
margin: 0 0 0 40px margin: 0 0 0 40px
.post-photo .post-photo
width: 30px width: 30px
height: 30px height: 30px
img img
width: 100% width: 100%
height: 100% height: 100%

Write Preview
Loading…
Cancel
Save