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

Lot of fixes + templating

nin-v2
myleneb 9 years ago
parent
d70646b533
commit
997b629fba
16 changed files with 1046 additions and 1133 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. 993
      css/style.css
  2. BIN
      img/tornado_avatar.png
  3. 90
      js/theme_option.js
  4. 9
      sass/base/_commons.sass
  5. 6
      sass/base/_utils.sass
  6. 24
      sass/base/_var.sass
  7. 1
      sass/layout/_dm.sass
  8. 46
      sass/layout/_menu.sass
  9. 338
      sass/layout/_modal.sass
  10. 334
      sass/layout/_postboard.sass
  11. 11
      sass/layout/_profile.sass
  12. 73
      sass/layout/_prompt.sass
  13. 16
      sass/layout/_responsive.sass
  14. 48
      sass/layout/_wrapper.sass
  15. 6
      sass/pages/_following.sass
  16. 152
      sass/style.sass

993
css/style.css
View File

File diff suppressed because it is too large Load Diff

BIN
img/tornado_avatar.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

90
js/theme_option.js
Unescape View File

@ -1,43 +1,18 @@
$(window).resize(function() $(window).resize(function()
{ {
$('.module.toptrends').detach().appendTo($('.dashboard.right')); reAppendModules();
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
}); });
$(document).ready(function() $(document).ready(function()
{ {
$('.module.toptrends').detach().appendTo($('.dashboard.right')); var windowHeight = $(window).height();
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); reOrganizeTemplates()
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');}); $('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');}); $('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
var windowHeight = $(window).height();
$('.modal-close').html('');
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.modal-back').html('');
$('.twister-user-remove').html('');
$('.profile-card-main').attr('style', '');
$('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
$('.mini-profile-actions span').html('');
$('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
$('.post-context').each(function(){
$(this).prependTo($(this).parent());
});
$( '.userMenu-home.current a' ).on( 'click', function() { $( '.userMenu-home.current a' ).on( 'click', function() {
$('html, body').animate({scrollTop:0},300); $('html, body').animate({scrollTop:0},300);
return false return false
@ -45,9 +20,8 @@ $(document).ready(function()
$( ".promoted-posts-only").click(function() {
// modify the way promoted posts are shown // modify the way promoted posts are shown
$( ".promoted-posts-only").click(function() {
//active promoted posts tab //active promoted posts tab
$(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled"); $(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
$(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active"); $(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
@ -72,16 +46,58 @@ $(document).ready(function()
$(document).ready(localizeLabels); $(document).ready(localizeLabels);
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
$(window).scroll(function(){
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
});
/*
$(window).scroll(function(){
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
if ($(document).scrollTop() >= 142) {
if (this.css('position') === 'relative')
this.addClass('onTop');
}else if (this.css('position') === 'fixed')
this.removeClass('onTop');
}).bind($('#postboard-top')));*/
}
);
}); function reOrganizeTemplates() { // for nin's templating
reAppendModules();
//removes unused html
$('.modal-close').html('');
$('.modal-back').html('');
$('.twister-user-remove').html('');
$('.profile-card-main').attr('style', '');
$('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
$('.mini-profile-actions span').html('');
//re-organizes
$('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
$('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post
//loader
newLoader()
}
function reAppendModules() { // avoid w1200 things
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
}
function newLoader() { // create divs for new loader
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
}
function localizeLabels() { function localizeLabels() {
$("label[for=tab_language]").text(polyglot.t("Language")); $("label[for=tab_language]").text(polyglot.t("Language"));
@ -93,8 +109,8 @@ function localizeLabels() {
} }
function openModal(modal) { function openModal(modal) {
window_scrollY = window.pageYOffset;
var windowHeight = $(window).height();
if (!modal.classBase) if (!modal.classBase)
modal.classBase = '.modal-wrapper'; modal.classBase = '.modal-wrapper';
@ -118,7 +134,6 @@ function openModal(modal) {
if (modal.classBase === '.modal-wrapper') { if (modal.classBase === '.modal-wrapper') {
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight()); modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
var windowHeight = $(window).height();
if (modal.self.outerHeight() > windowHeight) { if (modal.self.outerHeight() > windowHeight) {
modal.content.outerHeight(modal.content.outerHeight() - modal.self.outerHeight() + windowHeight); modal.content.outerHeight(modal.content.outerHeight() - modal.self.outerHeight() + windowHeight);
modal.self.outerHeight(windowHeight); modal.self.outerHeight(windowHeight);
@ -129,3 +144,4 @@ function openModal(modal) {
return modal; return modal;
} }

9
sass/base/_commons.sass
Unescape View File

@ -2,7 +2,7 @@
outline: none!important outline: none!important
+box-sizing(border-box) +box-sizing(border-box)
list-style: none list-style: none
color: $defaut-font-color
html, body html, body
@ -16,6 +16,7 @@ html
font-size: $global-font-size font-size: $global-font-size
background-color: $main-background-color background-color: $main-background-color
//+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) ) //+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
+background-image(radial-gradient(50% 100% , $main-background-color,$main-background-color,$main-background-color, darken($main-background-color, 7%)) )
background-attachment: fixed background-attachment: fixed
body body
font-size: $main-font-size font-size: $main-font-size
@ -31,7 +32,7 @@ a
color: $main-color-color color: $main-color-color
&:hover, &:active &:hover, &:active
color: $main-color-color color: $main-color-color
text-decoration: none text-decoration: underline
i i
text-decoration: underline text-decoration: underline
font-style: normal font-style: normal
@ -43,12 +44,10 @@ strong, b
font-weight: 600 font-weight: 600
img img
background: $bloc-light-color background: $bloc-background-color
h1 h1
font-size: 1.1em font-size: 1.1em
text-transform: uppercase
letter-spacing: 0.07em
font-weight: 700 font-weight: 700
line-height: 1.1em line-height: 1.1em

6
sass/base/_utils.sass
Unescape View File

@ -41,12 +41,12 @@ button, a.button
color: #666 color: #666
+box-shadow(1px 1px 0 rgba(#444, .3)) +box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1 &.color-1
background: #5E80A2 background: $main-color-color
border-color: darken(#5E80A2, 5%) border-color: darken($main-color-color, 5%)
color: white color: white
font-weight: 500 font-weight: 500
&:hover &:hover
border-color: darken(#5E80A2, 15%) border-color: darken($main-color-color, 22%)
&.color-2 &.color-2
background: #64676C background: #64676C
border-color: darken(#64676C, 5%) border-color: darken(#64676C, 5%)

24
sass/base/_var.sass
Unescape View File

@ -1,11 +1,19 @@
//these are the main variables used in the sass file //these are the main variables used in the sass file
$site-width : 1200px
$gut : 20
$postboardWidth : 700px
$miniProfileWidth : $site-width/10
$leftWidth : $miniProfileWidth + $gut
$rightWidth : $site-width - ($leftWidth + $postboardWidth)
$mini-usr-img : 42px
$usr-img : 64px
$space : 1rem
$site-width : 100%
$gut-width : 2.5%
$space : 1rem
// colors // colors
$light-grey: #C3C3C3 $light-grey: #C3C3C3
@ -18,10 +26,9 @@ $dark-grey : #444
$main-color-light: #aaa $main-color-light: #aaa
$main-color-dark: #222 $main-color-dark: #222
$main-color-color: $color-green $main-color-color: $color-green
$main-background-color: #EBEBEB $main-background-color: #E2E1DD
$bloc-light-color : #FDFCFA $bloc-light-color : #FDFCFA
$bloc-background-color: #F3F2F0
$bloc-background-color: #EBEBEB
$defaut-font-color: $dark-grey $defaut-font-color: $dark-grey
@ -36,8 +43,3 @@ $main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello" $symbol-font-family: "fontello"
$serif-font-family: "Droid", serif $serif-font-family: "Droid", serif
/* usefull vars */
$mini-usr-img : 40px
$usr-img : 64px

1
sass/layout/_dm.sass
Unescape View File

@ -28,7 +28,6 @@
.modal-content .modal-content
+box-sizing(border-box) +box-sizing(border-box)
width: 100% width: 100%
background: #f0f0f0
.post-photo .post-photo
width: $mini-usr-img width: $mini-usr-img

46
sass/layout/_menu.sass
Unescape View File

@ -1,23 +1,24 @@
// vars for the menu // vars for the menu
$menu-height : 50px $menu-height : 42px
$menu-font-color: white $menu-font-color: white
$menuBgColor : #67686C
.userMenu .userMenu
width: 100% width: 100%
position: fixed position: fixed
height: $menu-height height: $menu-height
left: 0 left: 0
margin: 0 margin: 0
background-color: #64676C //background-color: #FFAF1C
//+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) ) //+background-image(linear-gradient(to right , $color-green, #5E80A2) )
background-color: $menuBgColor
z-index: 2 z-index: 2
> ul > ul
@extend .clear-fix @extend .clear-fix
+box-sizing(border-box) +box-sizing(border-box)
width: 100% max-width: 100%
padding: 0 30% 0 15% width: $site-width
margin: auto
background: image-url("logo.png") no-repeat 50% 50% background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px background-size: 20px
li li
@ -30,17 +31,17 @@ $menu-font-color: white
padding: 0 .5em padding: 0 .5em
display: inline-block display: inline-block
color: rgba($menu-font-color, 0.7)!important color: rgba($menu-font-color, 0.7)!important
font-size: 1em font-size: 1.1em
position: relative position: relative
font-weight: 500 font-weight: 400
+box-sizing(border-box) +box-sizing(border-box)
&:hover &:hover
color: $menu-font-color!important color: $menu-font-color!important
> a span text-decoration: none
color: rgba($menu-font-color, 0.7)!important
&.current a, &.current a span
&.current a
color: $menu-font-color!important color: $menu-font-color!important
//+text-shadow(1px 1px 0 rgba(#000,.2))
/* Menu specific entries */ /* Menu specific entries */
@ -55,19 +56,19 @@ $menu-font-color: white
position: absolute position: absolute
text-align: center text-align: center
display: none display: none
top: 6px top: 4px
right: -6px right: -7px
background: $main-color-color background: $main-color-color
color: #fff
width: 15px width: 15px
height: 15px height: 15px
line-height: 15px line-height: 15px
font-size: 10px font-size: 10px
padding: 3px padding: 1px
font-weight: 900 font-weight: 900
+border-radius(50%) +border-radius(50%)
letter-spacing: -0.01em
+box-sizing(content-box) +box-sizing(content-box)
+text-shadow(1px 1px 0 rgba(#000, .3)) color: white
&.show &.show
display: block display: block
@ -82,13 +83,12 @@ $menu-font-color: white
+ a + a
color: $main-color-dark color: $main-color-dark
&.userMenu-search &.userMenu-search
margin: 3px
> input > input
border: 1px solid $main-color-light border: 1px solid #dedede
line-height: 12px line-height: $menu-height/2
font-size: 12px font-size: 12px
padding: 7px padding: 0 7px
background: white
&:focus &:focus
border-color: $main-color-dark border-color: $main-color-dark
&.userMenu-config > a &.userMenu-config > a

338
sass/layout/_modal.sass
Unescape View File

@ -1,17 +1,20 @@
/*********** POPUP MODAL **************/ /*********** POPUP MODAL **************/
// vars modal // vars modal
$header-modal-height : $menu-height $header-modal-height : $menu-height
// style
.modal-blackout
display: none
.modal-wrapper .modal-wrapper
background: $bloc-background-color background: $bloc-background-color
z-index: 3000 z-index: 4
width: 30% width: 34%
position: fixed position: fixed
+box-sizing(border-box) +box-sizing(border-box)
@extend .box-shadow @extend .box-shadow
@ -19,37 +22,116 @@ $header-modal-height : $menu-height
right: 0 right: 0
bottom: 0 bottom: 0
overflow: hidden overflow: hidden
+box-shadow(0 8px 13px rgba(#111, 0.2)) +box-shadow(-8px 0 13px rgba(#111, 0.2))
.postboard
border: none
padding: 0
.post-area-new // NEW USER MODAL //
padding: 10px
.modal-blackout &.new-user
background: rgba(0, 0, 0, 0)
z-index: -1 .modal-content
position: fixed padding: 25px
left: 0 .modal-close
top: 0 display: none
width: 0 .text
height: 0 margin: 0 0 15px 0
.emphasis
text-align: center
.secret-key
display: block
margin-top: 8px
color: rgba(0.5, 0, 0, 1)
font-weight: bold
font-size: 110%
// FOLOWING MODAL //
&.following-modal
h2
display: none
.mini-following-info
border-bottom: 1px solid $main-background-color
line-height: $mini-usr-img
a
display: block
padding: 10px
width: 100%
@extend .clear-fix
color: $defaut-font-color
background: $bloc-light-color
&:hover
background: white
text-decoration: none
font-weight: 500
.mini-profile-photo
width: $mini-usr-img
min-height: $mini-usr-img
overflow-x: hidden
line-height: 0
margin: 0 $space 0 0
float: left
.mini-following-name
&:after
line-height: 20px
.mini-screen-name
display: none
&.who-to-follow-modal
a
color: $main-color-dark
&.twister-user-name
&:hover
text-decoration: none
.twister-user-info
text-align: left
font-size: .8rem
line-height: 1rem
width: 80%
padding-left: $mini-usr-img + 20
button
position: absolute
right: 10px
top: 10px
@extend .small
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
padding: .25rem 0
.modal-content
@extend .clear-fix .modal-content
overflow: hidden width: 100%
overflow-y: auto @extend .clear-fix
.postboard-news overflow: hidden
position: fixed overflow-y: auto
display: block
right: 2px .postboard
top: $header-modal-height +2 padding: 0
z-index: 2000 clear: none!important
@extend .color-1 position: relative
h2 span width: 100%
display: none margin: auto
background: $bloc-background-color
h2
display: block
span
display: none
.postboard-news
position: fixed
display: block
right: 2px
top: $header-modal-height +2
z-index: 2000
@extend .color-1
@ -57,7 +139,7 @@ $header-modal-height : $menu-height
.modal-header .modal-header
position: relative position: relative
background: darken(#64676C,12%) background: darken($main-color-dark,.3)
height: $header-modal-height height: $header-modal-height
+box-sizing(border-box) +box-sizing(border-box)
@extend .clear-fix @extend .clear-fix
@ -99,190 +181,26 @@ $header-modal-height : $menu-height
/* MODAL */ /* Composants */
.modal-content
width: 100%
.postboard
padding: 0
clear: none!important
position: relative
width: 100%
margin: auto
background: $bloc-background-color
h2
display: block
/*********** POPUP PROMPT *************/
.prompt-wrapper .twister-user
position: relative
box-sizing: border-box
background: $bloc-light-color background: $bloc-light-color
z-index: 5 @extend .clear-fix
position: fixed border-top: 1px solid $main-background-color
top: 50% width: 100%
left: 50% min-height: auto
width: 600px padding: 7px
margin-left: -300px clear: left
+box-shadow(0 8px 33px rgba(#000, .3))
.modal-buttons
padding: 10px
text-align: right
.modal-content
background: $bloc-light-color
padding: 10px 10px 30px 10px
text-align: center
/************ FOLLOWING-CONFIG MODAL **********/
.prompt-wrapper.following-config-modal
margin-top: -100px
.modal-buttons
display: none
h2
text-transform: none
display: inline-block!important
font-size: 1rem
font-weight: 400
padding: $space
span
display: inline-block!important
b
font-weight: 400
/************ RETWIST POSTS MODAL **********/ /*********** POPUP PROMPT *************/
.prompt-wrapper.reTwist @import '_prompt'
&.prompt-wrapper
margin-top: -110px
.modal-content
padding: 20px 15px
.post-expand, .post-interactions
display: none
.post-info-time
position: static
float: right
.post-text
margin-top: 10px
margin-bottom: 10px
/********* REPLY POSTS MODAL***************/
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px
/********* DIRECT MESSAGES MODAL ***********/ /********* DIRECT MESSAGES MODAL ***********/
@import '_dm' @import '_dm'
/********* NEW USER MODAL**************/
.modal-wrapper.new-user
.modal-content
padding: 25px
.modal-close
display: none
.text
margin: 0 0 15px 0
.emphasis
text-align: center
.secret-key
display: block
margin-top: 8px
color: rgba(0.5, 0, 0, 1)
font-weight: bold
font-size: 110%
/******** HASHTAG MODAL***********/
.modal-wrapper.hashtag-modal
.postboard
padding: 0
/****** CONVERSATION MODAL***********/
.modal-wrapper.conversation-modal
.postboard
padding: 0
/****** FOLLOWING MODAL*******/
.modal-wrapper.following-modal
h2
display: none
.mini-following-info
border-bottom: 1px solid $main-background-color
line-height: $mini-usr-img
a
display: block
padding: 10px
width: 100%
@extend .clear-fix
color: $defaut-font-color
background: $bloc-light-color
&:hover
background: white
.mini-profile-photo
width: $mini-usr-img
line-height: 0
margin: 0 $space 0 0
float: left
.mini-screen-name
display: none
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
.open-profile-modal
&:hover
text-decoration: none
a.twister-user-name
color: $defaut-font-color
span
padding-bottom: .5rem
font-size: 1rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
.twister-user-info
text-align: left
font-size: .8rem
line-height: 1rem
width: 80%
padding-left: $mini-usr-img + 20
button
position: absolute
right: 10px
top: 10px
@extend .small
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
padding-bottom: .5rem

334
sass/layout/_postboard.sass
Unescape View File

@ -1,78 +1,126 @@
/************* POST BOARD *************/ /************* TOP TEXTAREA *************/
#postboard-top
position: relative
@extend .clear-fix
margin-bottom: 10px
transition: height .3s linear
padding: 10px
background: white
overflow: hidden
background: $bloc-light-color
@extend .on
+transition-property( top)
+transition-duration(.1s)
+transition-timing-function(ease-out)
top: 0
&.on
+box-shadow(1px 2px 2px rgba(#111, 0.1))
z-index: 120
&.fixed
position: fixed
width: $rightWidth
top: $menu-height
@extend .on
.profile-photo
position: absolute
top: 10px
left: 10px
width: $mini-usr-img
img
width: 100%
.post-area
overflow: hidden
@extend .clear-fix
width: 100%
padding-left: 58px
padding-right: 0
display: inline
+box-sizing(border-box)
background: none
float: right
.post-area-new
@extend .open
+box-shadow(none)
textarea
margin: 0 0 10px 0
// vars for postboard
/************* POSTBOARD *************/
.postboard .postboard
width: 55% width: $postboardWidth
margin-left: 15% float: left
padding: 7px 20px
h2
display: none
.postboard-posts
position: relative
z-index: 1
clear: both
.postboard-news h2, .postboard-news
display: none display: none
.postboard-posts
position: relative
z-index: 1
clear: both
.post .post
background: $bloc-light-color
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
@extend .box-shadow
+transition-property(margin) +transition-property(margin)
+transition-duration(.5s) +transition-duration(.5s)
+transition-timing-function(ease-out) +transition-timing-function(ease-out)
.post, .original.post, .post.open color: lighten($defaut-font-color, 10%)
position: relative cursor: pointer
&:hover
color: #000
.module.open .show-more
.post display: inline-block
color: darken($defaut-font-color, 15%) float: right
font-size: 12px
color: lighten($dark-grey,30%)
@extend .extend-icon
@extend .icon-chat
&:hover
color: lighten($dark-grey,5%)
.post-expand
color: lighten($dark-grey,30%)
cursor: pointer
font-size: 12px
position: absolute
left: 10px
bottom: 10px
&:hover
color: lighten($dark-grey,5%)
.post-data
padding: 10px
background: $bloc-light-color
.post:hover
color: darken($defaut-font-color, 15%)
.post-data
padding: $space
.post.open
.original, .related
margin-bottom: 1px
/*********** EVERYTHING SPECIFIC TO OPEN POSTS **************/
.postboard-posts > .post > .post
+border-radius(2px) +box-shadow(1px 2px 2px rgba(#111, 0.1))
&.open &.open
margin-top: $space margin-top: $space
margin-bottom: $space margin-bottom: $space
+border-radius(2px) +box-shadow(1px 2px 2px rgba(#111, 0))
.post
color: darken($defaut-font-color, 15%)
+box-shadow(1px 2px 2px rgba(#111, 0.1))
margin-bottom: 1px
&:not(.original)
.post-expand
display: none
margin: 0
&:after
content: ""
position: absolute
right: 0
top: 0
width: 0
height: 100%
transition: all .2s linear
&.open:after
width: 5px
.post:hover
cursor: pointer
.open
background: none!important
.post-photo .post-photo
margin: 0 margin: 0
@ -92,11 +140,9 @@
display: inline-block display: inline-block
float: left float: left
margin-left: 10px margin-left: 10px
&:hover
text-decoration: none
.post-info-name:hover color: black
text-decoration: none
color: black
.post-info-tag .post-info-tag
font-size: 12px font-size: 12px
@ -132,24 +178,21 @@
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
font-size: 13px
color: $dark-grey
.post-retransmited-icon // .post-interactions (reply, retransmit, fav)
display: none
.post-interactions .post-interactions
margin: 10px 0 3px 0 margin: 10px 0 3px 0
@ -161,79 +204,42 @@
cursor: pointer cursor: pointer
font-size: 12px font-size: 12px
line-height: 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%)
.post-reply, .post-propagate, .post-favorite
@extend .extend-icon
padding-left: 10px
display: none
&:hover
color: lighten($dark-grey,5%)
.post-reply
@extend .icon-comment
.post-propagate
@extend .icon-twistagain
.post-favorite
display: none!important
@extend .icon-star
.post
.show-more
display: inline-block
float: right
font-size: 12px
color: lighten($dark-grey,30%)
@extend .extend-icon @extend .extend-icon
@extend .icon-chat position: relative
&:hover margin-left: 7px
color: lighten($dark-grey,5%) display: none
.expanded-content.show-pic
display: block
.expanded-post
.post-expand, .post-reply, .post-propagate, .post-favorite
color: lighten($dark-grey,30%)
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.related .post-expand &.post-reply
display: none @extend .icon-comment
margin: 0 &.post-propagate
@extend .icon-twistagain
&.post-favorite
display: none!important //maybe one day
@extend .icon-star
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover .post:hover &
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate //, .post-favorite maybe one day
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
.expanded-content .expanded-content
display: none //display: none
padding: 5px 5px 0 5px padding: 0
@extend .clear-fix @extend .clear-fix
textarea
clear: left
.image-preview .image-preview
max-width: 100% max-width: 100%
@ -252,48 +258,64 @@
li li
display: inline-block display: inline-block
&.stat-count &.stat-count
font-weight: 700 font-size: 12px
font-size: 11px
float: left float: left
line-height: 20px line-height: 20px
color: llighten($dark-grey,30%) @extend .extend-icon
@extend .icon-twistagain
&:before
margin-right: 0
span:last-child span:last-child
padding-right: 5px display: none
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 2px 0 0
img img
width: 20px width: 20px
height: 20px height: 20px
+border-radius(3px)
.user-name-tooltip
display: none
position: absolute //what appears on top of .avatar-row img on hover
background: lighten($main-color-dark,3%)
font-size: 12px .avatar-row
white-space: nowrap margin-left: 5px
padding: 3px 5px a:hover
color: #fff .user-name-tooltip
top: -42px display: block
left: 0px
&:after .user-name-tooltip
content: "" display: none
position: absolute position: absolute
width: 0 background: $main-color-dark
left: 4px font-size: 11px
bottom: -5px line-height: 11px
border-top: solid 5px lighten($main-color-dark,3%) white-space: nowrap
border-left: solid 5px transparent padding: 5px
border-right: solid 5px transparent +border-radius(3px)
color: #fff
.post-stats a:hover .user-name-tooltip top: -32px
display: inline-block left: -10px
&:after
content: ""
position: absolute
width: 0
left: 13px
bottom: -5px
border-top: solid 5px $main-color-dark
border-left: solid 5px transparent
border-right: solid 5px transparent
// Posts replies get left border to show threads
.post-replies .sub-replies .post-replies .sub-replies
border-left: solid 18px $main-background-color border-left: solid 18px transparent

11
sass/layout/_profile.sass
Unescape View File

@ -34,11 +34,7 @@ $modal-postboard-post-height: 100%
height: $modal-postboard-post-height height: $modal-postboard-post-height
overflow: auto overflow: auto
.postboard-posts .post
padding: 0
margin-bottom: 1px
.post-interactions
margin: 2px 10px 3px 60px
.profile-card .profile-card
margin: 0 margin: 0
padding: 0 padding: 0
@ -109,8 +105,9 @@ $modal-postboard-post-height: 100%
.isFollowing:after .isFollowing:after
font-size: 15px font-size: 10px
position: absolute
.follow .follow
@extend .color-1 @extend .color-1

73
sass/layout/_prompt.sass
Unescape View File

@ -0,0 +1,73 @@
/*********** POPUP PROMPT *************/
.prompt-wrapper
background: $bloc-light-color
z-index: 5
position: fixed
top: 50%
left: 50%
width: 600px
margin-left: -300px
+box-shadow(0 8px 33px rgba(#000, .3))
.modal-buttons, .following-config-method-buttons
padding: 0 20px 20px 0
float: right
.modal-content
padding: 20px
.post-data
border: 1px solid $bloc-background-color
position: relative
padding: 10px
background: white
.modal-header
@extend .modal-header
h3 span
padding-left: 5px
color: white
&:hover
cursor: default
/************ FOLLOWING-CONFIG MODAL **********/
.prompt-wrapper.following-config-modal
margin-top: -100px
.modal-buttons
display: none
h2
text-transform: none
display: inline-block!important
font-size: 1rem
font-weight: 400
padding: $space
span
display: inline-block!important
b
font-weight: 400
/************ RETWIST POSTS MODAL **********/
.prompt-wrapper.reTwist
&.prompt-wrapper
margin-top: -110px
.post-expand, .post-interactions
display: none
.post-info-time
position: static
float: right
/********* REPLY POSTS MODAL***************/
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px

16
sass/layout/_responsive.sass
Unescape View File

@ -1,15 +1,23 @@
@media (max-width:1200px) @media (max-width: $site-width)
.right .right
display: none display: none
.userMenu .userMenu
ul ul
padding: 0 padding: 0
.postboard .postboard, #postboard-top.onTop
width: 85% position: absolute
left: 135px
right: 20px
width: auto
.modal-wrapper .modal-wrapper
width: 85% width: 85%
.postboard
width: $postboardWidth
float: left
position: relative
left: 0
@media (max-width: 600px) @media (max-width: 600px)

48
sass/layout/_wrapper.sass
Unescape View File

@ -0,0 +1,48 @@
/* Wrapper and blocks */
.wrapper
width: $site-width
max-width: 100%
margin: auto
padding-top: $menu-height + $gut/2
position: relative
z-index: 1
@extend .clear-fix
.dashboard
&.left
top: $menu-height
float: left
width: $leftWidth
min-height: 700px
> .module
width: $miniProfileWidth
position: fixed
top: $menu-height + $gut/2
&.right
float: left
top: $menu-height
overflow: hidden
width: $rightWidth
padding-left: 20px
padding-right: 3px
> .module
width: 100%
margin-bottom: 20px
background: $bloc-light-color
width: 100%
+box-shadow(1px 2px 2px rgba(#111, 0.1))
@extend .clear-fix
h3
float: left
padding: 10px
h4
clear: left
border-top: 1px solid $main-background-color
padding: 7px 10px
font-size: 90%
small
display: none

6
sass/pages/_following.sass
Unescape View File

@ -1,8 +1,8 @@
.following .following
width: 40% width: 55%
margin-left: 30% margin-left: 15%
padding: 20px padding: 7px 20px
h2 h2
display: none display: none
.following-list li .following-list li

152
sass/style.sass
Unescape View File

@ -10,6 +10,7 @@
// layout // layout
@import 'layout/_menu' @import 'layout/_menu'
@import 'layout/_wrapper'
@import 'layout/_modal' @import 'layout/_modal'
@import 'layout/_profile' @import 'layout/_profile'
@import 'layout/_postboard' @import 'layout/_postboard'
@ -38,7 +39,7 @@
font-size: .9em font-size: .9em
transition: color .1s linear transition: color .1s linear
&.disabled &.disabled
background: #F4F3F2 background: $bloc-background-color
&.active, &.active span &.active, &.active span
color: $defaut-font-color color: $defaut-font-color
cursor: default cursor: default
@ -52,50 +53,6 @@
/* Wrapper and blocks */
.wrapper
width: 100%
max-width: 100%
margin: auto
padding-top: $menu-height
position: relative
z-index: 1
.dashboard
&.left
position: absolute
top: $menu-height
left: 0
width: 15%
> .module
float: right
width: $usr-img * 2
&.right
position: fixed
right: 0
top: $menu-height
overflow: hidden
width: 30%
> .module
max-width: 320px
margin-bottom: 20px
background: $bloc-light-color
width: 100%
@extend .box-shadow
@extend .clear-fix
h3
float: left
padding: 20px
h4
clear: left
border-top: 1px solid $main-background-color
padding: 10px
small
display: none
/********** CONFIG SUBMENU & SEARCH RESULTS ************/ /********** CONFIG SUBMENU & SEARCH RESULTS ************/
@ -159,8 +116,10 @@ ul.userMenu-search-profiles
.mini-profile-photo .mini-profile-photo
width: $mini-usr-img width: $mini-usr-img
height: auto height: auto
margin: 10px min-height: $mini-usr-img
margin: 5px
float: left float: left
overflow-x: hidden
.mini-profile-info .mini-profile-info
width: 100% width: 100%
float: none float: none
@ -204,7 +163,9 @@ ul.userMenu-search-profiles
/***************** MINI PROFILE *******************************/ /***************** MINI PROFILE *******************************/
.mini-profile .mini-profile
@extend .box-shadow
a:hover
text-decoration: none
a.button a.button
background: $main-color-light background: $main-color-light
@ -227,7 +188,7 @@ ul.userMenu-search-profiles
text-align: center text-align: center
@extend .clear-fix @extend .clear-fix
border-top: 1px solid $main-background-color border-top: 1px solid $main-background-color
background: #F4F3F2 background: $bloc-background-color
li li
+box-sizing(border-box) +box-sizing(border-box)
@ -261,9 +222,8 @@ ul.userMenu-search-profiles
.messages-qtd .messages-qtd
position: absolute position: absolute
top: 50% top: 5px
margin-top: -11px right: 5px
right: 11px
background: $main-color-color background: $main-color-color
+text-shadow(1px 1px 0 rgba(#000,.2)) +text-shadow(1px 1px 0 rgba(#000,.2))
color: #fff color: #fff
@ -276,6 +236,8 @@ ul.userMenu-search-profiles
.mini-profile-view .mini-profile-view
display: none display: none
.left .mini-profile-info
padding-top: 32px
.mini-profile-name .mini-profile-name
color: $dark-grey color: $dark-grey
@ -293,7 +255,7 @@ ul.userMenu-search-profiles
width: $usr-img width: $usr-img
height: auto height: auto
display: block display: block
margin: 32px auto 0 auto margin: auto
@ -350,14 +312,14 @@ ul.userMenu-search-profiles
float: right float: right
color: $dark-grey color: $dark-grey
.mini-follower-link .mini-follower-link, .followed-by
display: inline-block display: inline-block
margin: 1px margin: 1px
line-height: 12px line-height: 12px
&.isFollowing:after &.isFollowing:after
display: none display: none
&:after &:after
content: '·' content: ''
font-weight: 900 font-weight: 900
color: $main-color-dark color: $main-color-dark
margin-left: 1px margin-left: 1px
@ -390,60 +352,19 @@ ul.userMenu-search-profiles
.mini-profile .post-area .mini-profile .post-area
display: none display: none
#postboard-top
clear: both
position: relative
@extend .clear-fix
margin-bottom: 10px
transition: height .3s linear
padding: 10px
background: white
overflow: hidden
background: $bloc-light-color
+box-shadow(0 0 13px rgba(#111, 0))
+transition-property(box-shadow)
+transition-duration(.2s)
+transition-timing-function(ease-out)
&.on
+box-shadow(0 8px 13px rgba(#111, 0.2))
z-index: 120
&.hide
display: none!important
&.show
display: block
.profile-photo
position: absolute
top: 10px
left: 10px
width: $mini-usr-img
img
width: 100%
.post-area
overflow: hidden
@extend .clear-fix
width: 100%
padding-left: 58px
padding-right: 0
display: inline
+box-sizing(border-box)
background: none
float: right
.post-area-new
@extend .open
+box-shadow(none)
textarea
margin: 0 0 10px 0
#post-preview #post-preview
background: $bloc-background-color
border: 1px solid $main-background-color border: 1px solid $main-background-color
padding: 15px border-bottom: 0
padding: 5px
+transition-property(all) +transition-property(all)
+transition-duration(.1s) +transition-duration(.1s)
width: 100%!important width: 100%!important
font-size: 90%
word-wrap: break-word word-wrap: break-word
clear: left
@ -494,9 +415,6 @@ textarea.splited-post
display: none display: none
&:hover button &:hover button
display: block display: block
.bio
text-align: left!important
small small
display: none display: none
@ -507,21 +425,6 @@ textarea.splited-post
@extend .clear-fix @extend .clear-fix
clear: both clear: both
.twister-user
position: relative
box-sizing: border-box
background: $bloc-light-color
@extend .clear-fix
border-top: 1px solid $main-background-color
width: 100%
min-height: auto
padding: 10px 0
clear: left
+transition-property(background)
+transition-duration(.1s)
@extend .clear-fix
&:hover
background: white
@ -531,29 +434,29 @@ img.twister-user-photo
float: left float: left
width: $mini-usr-img width: $mini-usr-img
height: auto height: auto
margin: 0 10px margin: 0 10px 0 0
background: $main-background-color
.followers .followers
font-size: 12px font-size: 12px
color: $dark-grey
label, a label, a
display: inline-block display: inline-block
.followed-by .followed-by
color: $main-color-light
font-size: 12px font-size: 12px
cursor: pointer cursor: pointer
display: block display: block
.twister-user-name, .twister-by-user-name .twister-user-name, .twister-by-user-name
font-weight: bold font-weight: 500
font-size: 14px font-size: 14px
color: $main-color-light
text-decoration: none text-decoration: none
color: $main-color-dark
.twister-user-name
font-weight: 700
.twister-user-tag .twister-user-tag
font-size: 12px font-size: 12px
@ -666,9 +569,6 @@ img.twister-user-photo
/******* LOADER *************/ /******* LOADER *************/
.postboard-loading, .loading-roller .postboard-loading, .loading-roller
font-size: 100px font-size: 100px
width: .4em width: .4em

Write Preview
Loading…
Cancel
Save