mirror of
https://github.com/twisterarmy/twister-html.git
synced 2025-01-11 15:37:55 +00:00
text markdown with monospace
This commit is contained in:
Simon Grim
parent
f6d8e6a380
commit
ad7c95308c
@ -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;
|
||||||
|
|||||||
@ -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, '&') // FIXME in many cases there is no need to escape ampersand in HTML 5
|
.replace(/&(?!lt;|gt;)/g, '&') // FIXME in many cases there is no need to escape ampersand in HTML 5
|
||||||
.replace(/"/g, '"')
|
.replace(/"/g, '"')
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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%
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user