twisterarmy/twister-html
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-html.git synced 2025-01-11 15:37:55 +00:00
Code Issues Projects Releases Wiki Activity

text markdown with monospace

Browse Source
This commit is contained in:
Simon Grim 2015-07-14 12:58:33 +05:00
parent f6d8e6a380
commit ad7c95308c
5 changed files with 250 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/style.css
View File

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

7
js/twister_formatpost.js
View File

@ -366,7 +366,7 @@ function htmlFormatMsg(msg, mentions) {
var stopCharsLeft = '<' + whiteSpaces;
var stopCharsRight = '>' + whiteSpaces;
var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing;
var stopCharsMarkDown = '~_-+=<>&' + stopCharsTrailing + whiteSpaces;
var stopCharsMarkDown = '~_-`+=<>&' + stopCharsTrailing + whiteSpaces;
var j, str, strEncoded;
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
'~', 'i'), // italic
'_', 'u'), // underlined
'-', 's') // striketrough
'-', 's'), // striketrough
'`', 'samp') // kind of monospace
.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(/"/g, '&quot;')

9
theme_calm/css/style.css
View File

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

4
theme_nin/css/style.css
View File

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

454
theme_nin/sass/_postboard.sass
View File

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