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 10 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
Split 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 { @@ -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
Unescape View File

@ -366,7 +366,7 @@ function htmlFormatMsg(msg, mentions) { @@ -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) { @@ -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
Unescape View File

@ -1230,12 +1230,17 @@ textarea.splited-post { @@ -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
Unescape View File

@ -878,6 +878,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, @@ -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
Unescape View File

@ -1,311 +1,313 @@ @@ -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 @@ @@ -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%

Write Preview
Loading…
Cancel
Save