Browse Source

More cleaning & templating

nin-v2
Mylene 9 years ago
parent
commit
b6bc99aade
  1. 614
      css/style.css
  2. 34
      js/theme_option.js
  3. 15
      sass/base/_commons.sass
  4. 22
      sass/base/_utils.sass
  5. 10
      sass/base/_var.sass
  6. 33
      sass/layout/_dm.sass
  7. 6
      sass/layout/_menu.sass
  8. 66
      sass/layout/_modal.sass
  9. 45
      sass/layout/_postboard.sass
  10. 15
      sass/layout/_profile.sass
  11. 291
      sass/style.sass

614
css/style.css

File diff suppressed because it is too large Load Diff

34
js/theme_option.js

@ -1,26 +1,27 @@ @@ -1,26 +1,27 @@
$(document).ready(function()
$(window).resize(function()
{
var windowHeight = $(window).height();
//$('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
});
$(window).resize(function()
$(document).ready(function()
{
var windowHeight = $(window).height();
//$('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
});
$(function(){
var windowHeight = $(window).height();
$('.modal-close').html('');
//$('.right').css('height', windowHeight - 100);
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
//$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.modal-back').html('');
$('.twister-user-remove').html('');
$('.profile-card-main').attr('style', '');
@ -39,6 +40,7 @@ $(function(){ @@ -39,6 +40,7 @@ $(function(){
});
$( ".promoted-posts-only").click(function() {
// modify the way promoted posts are shown
@ -66,6 +68,10 @@ $(function(){ @@ -66,6 +68,10 @@ $(function(){
$(document).ready(localizeLabels);
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
});
@ -100,8 +106,10 @@ function openModal(modal) { @@ -100,8 +106,10 @@ function openModal(modal) {
.append(modal.content);
else
modal.content = modal.self.find('.modal-content');
modal.self.prependTo('body').fadeIn('fast');
modal.postboard = modal.self.find('.postboard-posts');
modal.self.prependTo('body').fadeIn('slow');
if (modal.classBase === '.modal-wrapper') {
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());

15
sass/base/_commons.sass

@ -14,7 +14,7 @@ html, body @@ -14,7 +14,7 @@ html, body
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(linear-gradient(to top right, #fff, $main-background-color, #fff) )
background-attachment: fixed
body
@ -22,6 +22,7 @@ body @@ -22,6 +22,7 @@ body
line-height : $main-line-height
font-family : $main-font-family
font-weight: 400
overflow-y: scroll
@ -71,6 +72,18 @@ textarea, input @@ -71,6 +72,18 @@ textarea, input
display: block
border: none
samp
background: #eee
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
font-weight: 500
font-family: monospace
/* isFollowing */
.isFollowing:after

22
sass/base/_utils.sass

@ -2,7 +2,8 @@ @@ -2,7 +2,8 @@
.box-shadow
+box-shadow(0 8px 13px rgba(#333, .1))
+box-shadow(0 8px 13px rgba(#111, 0))
.clear-fix
&:after // clearfix
@ -21,7 +22,6 @@ button, a.button @@ -21,7 +22,6 @@ button, a.button
letter-spacing: 0.07rem
font-size: .75rem
position: relative
z-index: 10
font-weight: 300
margin: 2px
text-transform: uppercase
@ -42,21 +42,21 @@ button, a.button @@ -42,21 +42,21 @@ button, a.button
color: #666
+box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1
background: $main-color-color
border-color: darken($main-color-color, 5%)
background: #5E80A2
border-color: darken(#5E80A2, 5%)
color: white
font-weight: 500
&:hover
border-color: darken($main-color-color, 15%)
border-color: darken(#5E80A2, 15%)
&.color-2
background: #C3C3C3
border-color: darken(#C3C3C3, 5%)
background: #64676C
border-color: darken(#64676C, 5%)
color: white
font-weight: 500
&:hover
border-color: darken(#C3C3C3, 15%)
border-color: darken(#64676C, 15%)
&.small
padding: .3rem .5rem
padding: .5rem
font-weight: 700
font-size: .6rem
line-height: .6rem
font-size: .7rem
line-height: .7rem

10
sass/base/_var.sass

@ -32,7 +32,7 @@ $space : 1rem @@ -32,7 +32,7 @@ $space : 1rem
// colors
$light-grey: #C3C3C3
$color-green: #B4C669
$color-green: #A1B775
$color-red: #EF5D43
$color-blue: #39434F
$dark-grey : #444
@ -41,14 +41,14 @@ $dark-grey : #444 @@ -41,14 +41,14 @@ $dark-grey : #444
$main-color-light: #aaa
$main-color-dark: #222
$main-color-color: $color-green
$main-background-color: lighten($light-grey, 10% )
$bloc-light-color : lighten($light-grey, 20% )
$main-background-color: #EBEBEB
$bloc-light-color : #FDFCFA
$bloc-background-color: white
$bloc-background-color: #EBEBEB
$defaut-font-color: $dark-grey
$global-font-size : 15px
$global-font-size : 14px
$main-font-size : 1rem
$main-line-height : 1.4rem

33
sass/layout/_dm.sass

@ -1,16 +1,16 @@ @@ -1,16 +1,16 @@
/****** DIRECT MESSAGES MODAL**********/
.modal-wrapper.directMessages
.post-area-new
display: none
z-index: 5
background: $main-background-color
background: $main-color-dark !important
position: absolute
bottom: 0
width: 100%
padding: 0!important
width: 100% !important
padding: 20px!important
.modal-header
h3 span
display: inline-block!important
@ -21,14 +21,14 @@ @@ -21,14 +21,14 @@
.modal-content
+box-sizing(border-box)
width: 100%
background: #f0f0f0
.post-photo
height: 48px
width: 48px
.post-text
margin-left: 58px
font-size: .9em
font-size: .9rem
.post-info-name
float: none
.post-info-tag
@ -60,13 +60,19 @@ @@ -60,13 +60,19 @@
.direct-messages-list
.post:hover:after
display: block
.post:hover
background: white
li
position: relative
border-bottom: 1px solid $main-background-color
.direct-messages-thread
padding-bottom: 150px
padding-bottom: 180px
max-width: 420px
margin: auto
li
position: relative
position: relative!important
.post
@extend .clear-fix
background: none
@ -78,7 +84,8 @@ @@ -78,7 +84,8 @@
display: block
text-align: center
font-size: 10px
margin: 10px 0
padding-top: 10px
margin-bottom: 10px
cursor: default
position: static
&:hover
@ -108,18 +115,18 @@ @@ -108,18 +115,18 @@
position: relative
display: inline-block
max-width: 300px
font-size: .9em
font-size: .9rem
padding: 5px 10px
z-index: 4
float: left
word-wrap: break-word
max-width: 60%
min-height: 15px
max-width: 70%
min-height: 48px
.post-photo
position: absolute
left: 0
top: 10px
top: 35px

6
sass/layout/_menu.sass

@ -9,15 +9,15 @@ $menu-font-color: white @@ -9,15 +9,15 @@ $menu-font-color: white
height: $menu-height
left: 0
margin: 0
background-color: lighten($main-color-dark,10%)
//+background-image(radial-gradient(at top , $color-green,$color-blue) )
background-color: #64676C
//+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) )
z-index: 2
ul
@extend .clear-fix
+box-sizing(border-box)
width: 100%
max-width: 75%
max-width: 70%
margin: 0
background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px

66
sass/layout/_modal.sass

@ -9,9 +9,9 @@ $header-modal-height : $menu-height @@ -9,9 +9,9 @@ $header-modal-height : $menu-height
.modal-wrapper
background: white
background: $bloc-background-color
z-index: 3000
width: 25%
width: 30%
position: fixed
+box-sizing(border-box)
@extend .box-shadow
@ -19,6 +19,11 @@ $header-modal-height : $menu-height @@ -19,6 +19,11 @@ $header-modal-height : $menu-height
right: 0
bottom: 0
overflow: hidden
.postboard
border: none
padding: 0
.post-area-new
padding: 10px
@ -36,14 +41,15 @@ $header-modal-height : $menu-height @@ -36,14 +41,15 @@ $header-modal-height : $menu-height
overflow: hidden
overflow-y: auto
.postboard-news
position: absolute
position: fixed
display: block
right: 0
z-index: 20
right: 2px
top: $header-modal-height +2
z-index: 2000
@extend .color-1
h2 span
display: none
background: $bloc-light-color
background: $bloc-background-color
@ -51,7 +57,7 @@ $header-modal-height : $menu-height @@ -51,7 +57,7 @@ $header-modal-height : $menu-height
.modal-header
position: relative
background: $main-color-dark
background: darken(#64676C,12%)
height: $header-modal-height
+box-sizing(border-box)
@extend .clear-fix
@ -102,19 +108,12 @@ $header-modal-height : $menu-height @@ -102,19 +108,12 @@ $header-modal-height : $menu-height
position: relative
width: 100%
margin: auto
background: $main-background-color
background: $bloc-background-color
h2
display: block
.post-text
margin: 0 0 0 40px
.post-photo
width: 30px
height: 30px
img
width: 100%
height: 100%
//+border-radius(50%)
@ -132,8 +131,7 @@ $header-modal-height : $menu-height @@ -132,8 +131,7 @@ $header-modal-height : $menu-height
.modal-buttons
padding: 10px
text-align: right
button:last-child
padding: 5px 20px
/************ FOLLOWING-CONFIG MODAL **********/
@ -167,6 +165,12 @@ $header-modal-height : $menu-height @@ -167,6 +165,12 @@ $header-modal-height : $menu-height
.post-expand, .post-interactions
display: none
.post-info-time
position: static
float: right
.post-text
margin-top: 10px
margin-bottom: 10px
/********* REPLY POSTS MODAL***************/
@ -233,8 +237,9 @@ $header-modal-height : $menu-height @@ -233,8 +237,9 @@ $header-modal-height : $menu-height
width: 100%
@extend .clear-fix
color: $defaut-font-color
background: $bloc-background-color
&:hover
background: $bloc-background-color
background: $bloc-light-color
.mini-profile-photo
height: 48px
width: 48px
@ -250,18 +255,21 @@ $header-modal-height : $menu-height @@ -250,18 +255,21 @@ $header-modal-height : $menu-height
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
.modal-content
padding: 15px
+box-sizing(border-box)
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.twister-user
position: relative
padding: 5px
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
@ -275,4 +283,4 @@ $header-modal-height : $menu-height @@ -275,4 +283,4 @@ $header-modal-height : $menu-height
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
padding: .5rem
padding-bottom: .5rem

45
sass/layout/_postboard.sass

@ -3,11 +3,12 @@ @@ -3,11 +3,12 @@
// vars for postboard
$avatar-width : 48px
$avatar-width : 45px
.postboard
width: 100%
width: 40%
margin-left: 30%
padding: 20px
h2
display: none
@ -15,18 +16,18 @@ $avatar-width : 48px @@ -15,18 +16,18 @@ $avatar-width : 48px
position: relative
z-index: 1
clear: both
.postboard-news
display: none
.post
background: $bloc-background-color
background: $bloc-light-color
position: relative
margin-bottom: 1px
@extend .box-shadow
+transition-property(margin)
+transition-duration(.4s)
+transition-duration(.5s)
+transition-timing-function(ease-out)
.post, .original.post, .post.open
position: relative
@ -48,10 +49,11 @@ $avatar-width : 48px @@ -48,10 +49,11 @@ $avatar-width : 48px
.postboard-posts > .post
+border-radius(2px)
&.open
margin-top: $space
margin-bottom: $space
+border-radius(2px)
&:after
content: ""
@ -71,7 +73,7 @@ $avatar-width : 48px @@ -71,7 +73,7 @@ $avatar-width : 48px
.open
background: none!important
@extend .box-shadow
.post-photo
margin: 0
@ -79,13 +81,9 @@ $avatar-width : 48px @@ -79,13 +81,9 @@ $avatar-width : 48px
float: left
vertical-align: middle
width: $avatar-width
height: $avatar-width
overflow: hidden
img
width: 100%
height: 100%
//+border-radius(50%)
height: auto!important
.post-info-name
font-weight: 600
@ -120,18 +118,9 @@ $avatar-width : 48px @@ -120,18 +118,9 @@ $avatar-width : 48px
.post-text
margin: 0 0 0 ($avatar-width +10)
word-wrap: break-word
min-height: $avatar-width
min-height: $avatar-width - 20
padding: 0
samp
background: #eee
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
font-weight: 500
font-family: monospace
.post-context
@ -244,13 +233,14 @@ $avatar-width : 48px @@ -244,13 +233,14 @@ $avatar-width : 48px
padding: 5px 5px 0 5px
@extend .clear-fix
.image-preview
width: 100%
max-width: 100%
width: auto
display: block
margin: auto
.preview-container
max-height: 500px
width: 100%
text-align: center
overflow-y: auto
@ -304,6 +294,5 @@ $avatar-width : 48px @@ -304,6 +294,5 @@ $avatar-width : 48px
display: inline-block
.post-replies .sub-replies
border-left: solid 3px $main-color-color
margin-left: 1px
border-left: solid 18px $main-background-color

15
sass/layout/_profile.sass

@ -26,13 +26,14 @@ $modal-postboard-post-height: 100% @@ -26,13 +26,14 @@ $modal-postboard-post-height: 100%
.postboard
width: 100%
height: 100%
position: relative
position: absolute
.postboard-posts
display: block
height: $modal-postboard-post-height
overflow-y: auto
overflow: auto
.postboard-posts .post
padding: 0
margin-bottom: 1px
@ -41,6 +42,8 @@ $modal-postboard-post-height: 100% @@ -41,6 +42,8 @@ $modal-postboard-post-height: 100%
.profile-card
margin: 0
padding: 0
.profile-data
background: none
.profile-modal
h2.profile-screen-name
@ -58,7 +61,7 @@ $modal-postboard-post-height: 100% @@ -58,7 +61,7 @@ $modal-postboard-post-height: 100%
.profile-card
width: 100%
background: white
background: $bloc-light-color
padding: $modal-gut
.profile-card-main
position: relative
@ -122,11 +125,7 @@ $modal-postboard-post-height: 100% @@ -122,11 +125,7 @@ $modal-postboard-post-height: 100%
.twister-user-info
@extend .clear-fix
text-align: center
width: 100%
padding: 0

291
sass/style.sass

@ -1,4 +1,7 @@ @@ -1,4 +1,7 @@
@import '../css/jquery.mCustomScrollbar.css'
@import compass
@import 'compass/reset'
@import 'compass/utilities'
@ -26,7 +29,6 @@ @@ -26,7 +29,6 @@
.promoted-posts-only
margin: 0 0
@extend .clear-fix
@ -56,7 +58,7 @@ @@ -56,7 +58,7 @@
/* Wrapper and blocks */
.wrapper
width: 50%
width: 100%
max-width: 100%
margin: auto
padding-top: $menu-height
@ -65,21 +67,32 @@ @@ -65,21 +67,32 @@
.dashboard
&.left
position: fixed
position: absolute
top: $menu-height
left: 0
height: 100vh
overflow: hidden
width: 25%
width: 30%
> .module
float: right
&.right
position: fixed
right: 0
top: $menu-height
overflow: hidden
width: 25%
width: 30%
> .module
max-width: 320px
margin-bottom: 20px
background: $bloc-light-color
width: 100%
@extend .box-shadow
h3
float: left
padding: 20px
h4
clear: left
border-top: 1px solid $main-background-color
padding: 10px
@ -176,10 +189,7 @@ ul.userMenu-search-profiles @@ -176,10 +189,7 @@ ul.userMenu-search-profiles
.mini-profile
@extend .box-shadow
.mini-profile-info
position: relative
text-align: center
background: $bloc-background-color
padding: 20px 0
a.button
background: $main-color-light
@ -212,17 +222,21 @@ ul.userMenu-search-profiles @@ -212,17 +222,21 @@ ul.userMenu-search-profiles
font-size: .8em
width: 25%
float: left
text-align: center
border-right: 1px solid $main-background-color
&:last-child
border: none
a
color: $dark-grey
color: lighten($dark-grey,20%)
display: block
padding: 1em 0
padding: 1rem 0
&:hover
text-decoration: underline
color: $dark-grey
&:before
display: block!important
width: 100%!important
font-size: 1.4rem!important
.userMenu-connections a
@extend .icon-bell
@ -349,11 +363,11 @@ ul.userMenu-search-profiles @@ -349,11 +363,11 @@ ul.userMenu-search-profiles
-moz-transition: height 0.3s linear
-o-transition: height 0.3s linear
-ms-transition: height 0.3s linear
height: 28px
height: 48px
border: none
background: rgba(255, 255, 255, 1)
border: 1px solid rgba(0, 0, 0, 0.1)
padding: 3px
padding: 5px
margin: 5px 0
&:focus
border-bottom: solid 1px $main-color-color
@ -398,6 +412,13 @@ ul.userMenu-search-profiles @@ -398,6 +412,13 @@ ul.userMenu-search-profiles
margin: 0 0 10px 0
#post-preview
background: $bloc-background-color
border: 1px solid $main-background-color
padding: 15px
+transition-property(all)
+transition-duration(.1s)
width: 100%!important
@ -438,31 +459,25 @@ textarea.splited-post @@ -438,31 +459,25 @@ textarea.splited-post
.who-to-follow
&.module
margin-bottom: 20px
background: white
padding: 20px
width: 100%
@extend .box-shadow
li
width: 100%
min-height: auto
border-bottom: 1px solid $main-background-color
margin: 0
padding-bottom: 10px
margin-top: 10px
&:last-child
border: none
@extend .clear-fix
button
position: absolute
right: 0
top: 20%
right: 10px
top: 10px
@extend .small
display: none
&:hover button
display: block
.bio
text-align: left!important
small
display: none
h3
float: left
padding: 20px
ol
@extend .clear-fix
clear: both
@ -470,27 +485,29 @@ textarea.splited-post @@ -470,27 +485,29 @@ textarea.splited-post
.twister-user
position: relative
box-sizing: border-box
background: $bloc-background-color
background: $bloc-light-color
@extend .clear-fix
@extend .col
@extend .col-3
border-top: 1px solid $main-background-color
width: 100%
min-height: auto
&:nth-child(4n)
@extend .last
padding: 10px 0
clear: left
+transition-property(background)
+transition-duration(.1s)
@extend .clear-fix
&:hover
background: white
img.twister-user-photo
+border-radius(50%)
float: left
vertical-align: middle
display: block
float: left
vertical-align: middle
width: 48px
height: 48px
margin: 10px
height: auto
margin: 0 10px
background: $main-background-color
@ -609,97 +626,117 @@ ol.toptrends-list @@ -609,97 +626,117 @@ ol.toptrends-list
/********* TWISTDAY REMINDER *******/
.twistday-reminder
width: 100%
background: white
@extend .box-shadow
@extend .clear-fix
padding: 20px
small
display: none
.twister-user
background: $bloc-light-color
position: relative
+transition-property(background)
+transition-duration(.1s)
&:hover
background: white
.twister-user-full, .twister-user-tag
padding: 0 0 .5rem 0
font-size: 1rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
display: inline-block
.twisterday
font-size: 12px
/******* LOADER *************/
/******* LOADER *************/
.postboard-loading, .loading-roller
clear: both
text-align: center
div
display: inline-block
width: 120px
height: 10px
background-color: $main-color-light
position: relative
margin: 10px 0 0 0
&:after
content: ""
position: absolute
background-color: white
left: 2px
top: 2px
bottom: 2px
z-index: 999
animation-name: slide
animation-duration: 1.5s
animation-easing-function: linear
animation-iteration-count: infinite
-webkit-animation-name: slide
-webkit-animation-duration: 1.5s
-webkit-animation-easing-function: linear
-webkit-animation-iteration-count: infinite
-moz-animation-name: slide
-moz-animation-duration: 1.5s
-moz-animation-easing-function: linear
-moz-animation-iteration-count: infinite
@keyframes slide
0%
right: 60px
left: 2px
5%
left: 2px
50%
right: 2px
left: 60px
55%
right: 2px
100%
right: 60px
left: 2px
@-webkit-keyframes slide
0%
right: 100px
left: 2px
5%
left: 2px
50%
right: 2px
left: 100px
55%
right: 2px
100%
right: 100px
left: 2px
@-moz-keyframes slide
0%
right: 60px
left: 2px
5%
left: 2px
50%
right: 2px
left: 60px
55%
right: 2px
100%
right: 60px
left: 2px
font-size: 100px
width: .4em
height: .4em
position: relative
list-style: none
border-radius: 50%
margin: 100px auto
display: none
div
width: .1em
height: .1em
position: absolute
border-radius: 50%
&:nth-child(1)
background: #62839F
top: 0
left: 50%
margin-left: -.05em
transform-origin: 50% 250%
animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate
&:nth-child(2)
background: #749294
top: 50%
right: 0
margin-top: -.05em
transform-origin: -150% 50%
animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate
&:nth-child(3)
background: #94AC7E
bottom: 0
left: 50%
margin-left: -.05em
transform-origin: 50% -150%
animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate
&:nth-child(4)
background: #B4C669
top: 50%
left: 0
margin-top: -.05em
transform-origin: 250% 50%
animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate
@keyframes rota
to
transform: rotate(360deg)
@keyframes opa
12.0%
opacity: 0.80
19.5%
opacity: 0.88
37.2%
opacity: 0.64
40.5%
opacity: 0.52
52.7%
opacity: 0.69
60.2%
opacity: 0.60
66.6%
opacity: 0.52
70.0%
opacity: 0.63
79.9%
opacity: 0.60
84.2%
opacity: 0.75
91.0%
opacity: 0.87
/* Options*/

Loading…
Cancel
Save