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
Split 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. 314
      sass/layout/_modal.sass
  10. 264
      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 @@ @@ -1,43 +1,18 @@
$(window).resize(function()
{
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
reAppendModules();
});
$(document).ready(function()
{
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
var windowHeight = $(window).height();
reOrganizeTemplates()
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('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() {
$('html, body').animate({scrollTop:0},300);
return false
@ -45,9 +20,8 @@ $(document).ready(function() @@ -45,9 +20,8 @@ $(document).ready(function()
$( ".promoted-posts-only").click(function() {
// modify the way promoted posts are shown
$( ".promoted-posts-only").click(function() {
//active promoted posts tab
$(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
$(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
@ -72,16 +46,58 @@ $(document).ready(function() @@ -72,16 +46,58 @@ $(document).ready(function()
$(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() {
$("label[for=tab_language]").text(polyglot.t("Language"));
@ -93,8 +109,8 @@ function localizeLabels() { @@ -93,8 +109,8 @@ function localizeLabels() {
}
function openModal(modal) {
window_scrollY = window.pageYOffset;
var windowHeight = $(window).height();
if (!modal.classBase)
modal.classBase = '.modal-wrapper';
@ -118,7 +134,6 @@ function openModal(modal) { @@ -118,7 +134,6 @@ function openModal(modal) {
if (modal.classBase === '.modal-wrapper') {
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
var windowHeight = $(window).height();
if (modal.self.outerHeight() > windowHeight) {
modal.content.outerHeight(modal.content.outerHeight() - modal.self.outerHeight() + windowHeight);
modal.self.outerHeight(windowHeight);
@ -129,3 +144,4 @@ function openModal(modal) { @@ -129,3 +144,4 @@ function openModal(modal) {
return modal;
}

9
sass/base/_commons.sass
Unescape View File

@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
outline: none!important
+box-sizing(border-box)
list-style: none
color: $defaut-font-color
html, body
@ -16,6 +16,7 @@ html @@ -16,6 +16,7 @@ html
font-size: $global-font-size
background-color: $main-background-color
//+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
body
font-size: $main-font-size
@ -31,7 +32,7 @@ a @@ -31,7 +32,7 @@ a
color: $main-color-color
&:hover, &:active
color: $main-color-color
text-decoration: none
text-decoration: underline
i
text-decoration: underline
font-style: normal
@ -43,12 +44,10 @@ strong, b @@ -43,12 +44,10 @@ strong, b
font-weight: 600
img
background: $bloc-light-color
background: $bloc-background-color
h1
font-size: 1.1em
text-transform: uppercase
letter-spacing: 0.07em
font-weight: 700
line-height: 1.1em

6
sass/base/_utils.sass
Unescape View File

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

24
sass/base/_var.sass
Unescape View File

@ -1,11 +1,19 @@ @@ -1,11 +1,19 @@
//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
$light-grey: #C3C3C3
@ -18,10 +26,9 @@ $dark-grey : #444 @@ -18,10 +26,9 @@ $dark-grey : #444
$main-color-light: #aaa
$main-color-dark: #222
$main-color-color: $color-green
$main-background-color: #EBEBEB
$main-background-color: #E2E1DD
$bloc-light-color : #FDFCFA
$bloc-background-color: #EBEBEB
$bloc-background-color: #F3F2F0
$defaut-font-color: $dark-grey
@ -36,8 +43,3 @@ $main-font-family: "Roboto", sans-serif @@ -36,8 +43,3 @@ $main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello"
$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 @@ @@ -28,7 +28,6 @@
.modal-content
+box-sizing(border-box)
width: 100%
background: #f0f0f0
.post-photo
width: $mini-usr-img

46
sass/layout/_menu.sass
Unescape View File

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

314
sass/layout/_modal.sass
Unescape View File

@ -1,17 +1,20 @@ @@ -1,17 +1,20 @@
/*********** POPUP MODAL **************/
// vars modal
$header-modal-height : $menu-height
// style
.modal-blackout
display: none
.modal-wrapper
background: $bloc-background-color
z-index: 3000
width: 30%
z-index: 4
width: 34%
position: fixed
+box-sizing(border-box)
@extend .box-shadow
@ -19,27 +22,109 @@ $header-modal-height : $menu-height @@ -19,27 +22,109 @@ $header-modal-height : $menu-height
right: 0
bottom: 0
overflow: hidden
+box-shadow(0 8px 13px rgba(#111, 0.2))
.postboard
border: none
padding: 0
+box-shadow(-8px 0 13px rgba(#111, 0.2))
// NEW USER MODAL //
&.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%
.post-area-new
// 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%
.modal-blackout
background: rgba(0, 0, 0, 0)
z-index: -1
position: fixed
left: 0
top: 0
width: 0
height: 0
@extend .clear-fix
color: $defaut-font-color
background: $bloc-light-color
.modal-content
&: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
width: 100%
@extend .clear-fix
overflow: hidden
overflow-y: auto
.postboard
padding: 0
clear: none!important
position: relative
width: 100%
margin: auto
h2
display: block
span
display: none
.postboard-news
position: fixed
display: block
@ -47,9 +132,6 @@ $header-modal-height : $menu-height @@ -47,9 +132,6 @@ $header-modal-height : $menu-height
top: $header-modal-height +2
z-index: 2000
@extend .color-1
h2 span
display: none
background: $bloc-background-color
@ -57,7 +139,7 @@ $header-modal-height : $menu-height @@ -57,7 +139,7 @@ $header-modal-height : $menu-height
.modal-header
position: relative
background: darken(#64676C,12%)
background: darken($main-color-dark,.3)
height: $header-modal-height
+box-sizing(border-box)
@extend .clear-fix
@ -99,190 +181,26 @@ $header-modal-height : $menu-height @@ -99,190 +181,26 @@ $header-modal-height : $menu-height
/* MODAL */
.modal-content
width: 100%
.postboard
padding: 0
clear: none!important
/* Composants */
.twister-user
position: relative
box-sizing: border-box
background: $bloc-light-color
@extend .clear-fix
border-top: 1px solid $main-background-color
width: 100%
margin: auto
background: $bloc-background-color
h2
display: block
min-height: auto
padding: 7px
clear: left
/*********** 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
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 **********/
.prompt-wrapper.reTwist
&.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
@import '_prompt'
/********* DIRECT MESSAGES MODAL ***********/
@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

264
sass/layout/_postboard.sass
Unescape View File

@ -1,77 +1,125 @@ @@ -1,77 +1,125 @@
/************* 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
width: 55%
margin-left: 15%
padding: 7px 20px
h2
width: $postboardWidth
float: left
h2, .postboard-news
display: none
.postboard-posts
.postboard-posts
position: relative
z-index: 1
clear: both
.postboard-news
display: none
.post
background: $bloc-light-color
position: relative
margin-bottom: 1px
@extend .box-shadow
+transition-property(margin)
+transition-duration(.5s)
+transition-timing-function(ease-out)
.post, .original.post, .post.open
position: relative
color: lighten($defaut-font-color, 10%)
cursor: pointer
&:hover
color: #000
.module.open
.post
color: darken($defaut-font-color, 15%)
.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%)
.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
+border-radius(2px)
> .post
+box-shadow(1px 2px 2px rgba(#111, 0.1))
&.open
margin-top: $space
margin-bottom: $space
+border-radius(2px)
&:after
content: ""
position: absolute
right: 0
top: 0
width: 0
height: 100%
transition: all .2s linear
&.open:after
width: 5px
+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
.post:hover
cursor: pointer
.open
background: none!important
.post-photo
@ -92,9 +140,7 @@ @@ -92,9 +140,7 @@
display: inline-block
float: left
margin-left: 10px
.post-info-name:hover
&:hover
text-decoration: none
color: black
@ -144,12 +190,9 @@ @@ -144,12 +190,9 @@
color: white
margin-right: .4em
.mini-screen-name
font-size: 13px
color: $dark-grey
.post-retransmited-icon
display: none
// .post-interactions (reply, retransmit, fav)
.post-interactions
margin: 10px 0 3px 0
@ -161,79 +204,42 @@ @@ -161,79 +204,42 @@
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%)
.post-reply, .post-propagate, .post-favorite
@extend .extend-icon
padding-left: 10px
position: relative
margin-left: 7px
display: none
&:hover
color: lighten($dark-grey,5%)
.post-reply
&.post-reply
@extend .icon-comment
.post-propagate
&.post-propagate
@extend .icon-twistagain
.post-favorite
display: none!important
&.post-favorite
display: none!important //maybe one day
@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%)
.expanded-content.show-pic
display: block
.expanded-post
.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
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
.post-reply, .post-propagate, .post-favorite
.post:hover &
.post-reply, .post-propagate //, .post-favorite maybe one day
display: inline-block
.open .related
.post-reply, .post-propagate, .post-favorite
.post-reply,
.post-propagate,
.post-favorite
display: none!important
&:hover
.post-reply, .post-propagate/*, .post-favorite*/
.post-reply,
.post-propagate/*, .post-favorite*/
display: inline-block!important
.expanded-content
display: none
padding: 5px 5px 0 5px
//display: none
padding: 0
@extend .clear-fix
textarea
clear: left
.image-preview
max-width: 100%
@ -252,48 +258,64 @@ @@ -252,48 +258,64 @@
li
display: inline-block
&.stat-count
font-weight: 700
font-size: 11px
font-size: 12px
float: left
line-height: 20px
color: llighten($dark-grey,30%)
@extend .extend-icon
@extend .icon-twistagain
&:before
margin-right: 0
span:last-child
padding-right: 5px
display: none
a
position: relative
text-decoration: none
display: inline-block
width: 20px
height: 20px
margin: 0 1px 0 0
margin: 0 2px 0 0
img
width: 20px
height: 20px
+border-radius(3px)
.user-name-tooltip
//what appears on top of .avatar-row img on hover
.avatar-row
margin-left: 5px
a:hover
.user-name-tooltip
display: block
.user-name-tooltip
display: none
position: absolute
background: lighten($main-color-dark,3%)
font-size: 12px
background: $main-color-dark
font-size: 11px
line-height: 11px
white-space: nowrap
padding: 3px 5px
padding: 5px
+border-radius(3px)
color: #fff
top: -42px
left: 0px
top: -32px
left: -10px
&:after
content: ""
position: absolute
width: 0
left: 4px
left: 13px
bottom: -5px
border-top: solid 5px lighten($main-color-dark,3%)
border-top: solid 5px $main-color-dark
border-left: solid 5px transparent
border-right: solid 5px transparent
.post-stats a:hover .user-name-tooltip
display: inline-block
// Posts replies get left border to show threads
.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% @@ -34,11 +34,7 @@ $modal-postboard-post-height: 100%
height: $modal-postboard-post-height
overflow: auto
.postboard-posts .post
padding: 0
margin-bottom: 1px
.post-interactions
margin: 2px 10px 3px 60px
.profile-card
margin: 0
padding: 0
@ -109,8 +105,9 @@ $modal-postboard-post-height: 100% @@ -109,8 +105,9 @@ $modal-postboard-post-height: 100%
.isFollowing:after
font-size: 15px
position: absolute
font-size: 10px
.follow
@extend .color-1

73
sass/layout/_prompt.sass
Unescape View File

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

48
sass/layout/_wrapper.sass
Unescape View File

@ -0,0 +1,48 @@ @@ -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 @@ @@ -1,8 +1,8 @@
.following
width: 40%
margin-left: 30%
padding: 20px
width: 55%
margin-left: 15%
padding: 7px 20px
h2
display: none
.following-list li

152
sass/style.sass
Unescape View File

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

Write Preview
Loading…
Cancel
Save