Browse Source

profile page

nin-v2
myleneb 9 years ago
parent
commit
15d6ea4102
  1. 145
      css/style.css
  2. 2
      js/theme_option.js
  3. 58
      sass/layout/_profile.sass
  4. 79
      sass/pages/_profile.sass

145
css/style.css

@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, .login .module p span, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
del, dfn, em, img, ins, kbd, q, s, samp, .forEdition.profile-card .secret-key-container .secret-key,
small, strike, strong, sub, sup, tt, var,
b, u, i, .profile-bio, center,
dl, dt, dd, ol, ul, li,
@ -297,7 +297,7 @@ textarea, input { @@ -297,7 +297,7 @@ textarea, input {
border: none;
}
samp {
samp, .forEdition.profile-card .secret-key-container .secret-key {
background: #3E3C42;
color: white;
font-size: 11px;
@ -335,7 +335,7 @@ h3 .isFollowing:after, .login .module p span .isFollowing:after { @@ -335,7 +335,7 @@ h3 .isFollowing:after, .login .module p span .isFollowing:after {
box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
}
.clear-fix:after, .userMenu > ul:after, .wrapper:after, .dashboard > .module:after, .dashboard > .module ol:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, .forEdition.profile-card:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .following .following-list li a:after, .login .module:after, .network.singleBlock:after, .network.singleBlock .module:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after {
.clear-fix:after, .userMenu > ul:after, .wrapper:after, .dashboard > .module:after, .dashboard > .module ol:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .forEdition.profile-card:after, .forEdition.profile-card .profile-card-main:after, .following .following-list li a:after, .login .module:after, .network.singleBlock:after, .network.singleBlock .module:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after {
content: "";
display: table;
clear: both;
@ -1180,66 +1180,6 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -1180,66 +1180,6 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.profile-modal .modal-buttons {
display: none;
/* EDITION PROFILE */
}
.forEdition.profile-card {
margin: 0;
width: 670px;
background: none;
padding: 0;
}
.forEdition.profile-card .profile-card-main {
padding: 10px 0;
}
.forEdition.profile-card .profile-card-main input {
display: block;
margin: 0 0 10px 100px;
width: 600px;
background: #F3F2F0;
border: 1px solid #FDFCFA;
padding: 6px 4px;
margin-bottom: 4px;
font-size: 1rem;
font-weight: 400;
}
.forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus {
background: white;
border-color: #000;
}
.forEdition.profile-card img {
width: 70px;
float: left;
}
.forEdition.profile-card h2 {
font-weight: 400;
padding: 1rem 2rem;
color: white;
}
.forEdition.profile-card button, .forEdition.profile-card .show-more-followers {
float: right;
margin: 10px;
}
.forEdition.profile-card button.last-child, .forEdition.profile-card .last-child.show-more-followers {
margin-right: 0;
}
.forEdition.profile-card .secret-key-container {
text-align: left !important;
font-size: 1rem !important;
}
.forEdition.profile-card .secret-key {
clear: both;
margin: 20px 0;
background: white;
text-align: left !important;
font-size: 1rem !important;
padding: 10px;
}
.forEdition.profile-card .label {
clear: both;
display: block;
font-weight: 500;
margin: 20px 0;
}
/************* TOP TEXTAREA ************ */
@ -1599,6 +1539,85 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -1599,6 +1539,85 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
border-left: solid 18px transparent;
}
.forEdition.profile-card {
padding: 0;
background: none;
background: #FDFCFA;
-moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
}
.forEdition.profile-card .profile-card-main {
padding: 20px;
margin: 0 0 1px 0;
}
.forEdition.profile-card .profile-card-main input {
display: block;
margin: 0 0 10px 100px;
width: 600px;
background: #F3F2F0;
border: 1px solid #FDFCFA;
padding: 6px 4px;
margin-bottom: 4px;
font-size: 1rem;
font-weight: 400;
}
.forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus {
background: white;
border-color: #000;
}
.forEdition.profile-card img {
width: 70px;
float: left;
}
.forEdition.profile-card h2 {
font-weight: 400;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExYjc3NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlODBhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #a1b775), color-stop(100%, #5e80a2));
background-image: -moz-linear-gradient(right, #a1b775, #5e80a2);
background-image: -webkit-linear-gradient(right, #a1b775, #5e80a2);
background-image: linear-gradient(to left, #a1b775, #5e80a2);
padding: 1rem 2rem;
color: white;
}
.forEdition.profile-card h3, .forEdition.profile-card .login .module p span, .login .module p .forEdition.profile-card span {
font-weight: 600;
margin-top: 2rem;
padding: 0 1.5rem;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.forEdition.profile-card h3:after, .forEdition.profile-card .login .module p span:after, .login .module p .forEdition.profile-card span:after {
display: block;
content: "";
height: 1px;
width: 100%;
background: rgba(95, 129, 161, 0.5);
margin-top: 1rem;
}
.forEdition.profile-card button, .forEdition.profile-card .show-more-followers {
float: right;
margin: 10px;
}
.forEdition.profile-card button.last-child, .forEdition.profile-card .last-child.show-more-followers {
margin-right: 0;
}
.forEdition.profile-card .secret-key-container {
text-align: left !important;
font-size: 1rem !important;
clear: both;
padding: 10px;
}
.forEdition.profile-card .secret-key-container .label {
clear: both;
display: block;
float: left;
font-weight: 700;
margin-right: 20px;
}
.following {
width: 670px;
float: left;

2
js/theme_option.js

@ -92,7 +92,7 @@ function reOrganizeTemplates() { // for nin's templating @@ -92,7 +92,7 @@ function reOrganizeTemplates() { // for nin's templating
//$('.userMenu li > a').wrapInner('<span class="inner"></span>');
///// page profile
$('.forEdition h2').detach().prependTo($('.forEdition'));
$('.profile-card-main h2').detach().insertBefore($('.profile-card-main'));
//loader
newLoader()

58
sass/layout/_profile.sass

@ -160,61 +160,3 @@ $modal-postboard-post-height: 100% @@ -160,61 +160,3 @@ $modal-postboard-post-height: 100%
.profile-modal .modal-buttons
display: none
/* EDITION PROFILE*/
.forEdition.profile-card
@extend .clear-fix
margin: 0
width: $postboardWidth
background: none
padding: 0
.profile-card-main
padding: 10px 0
input
display: block
margin: 0 0 10px 100px
width: 600px
background: $bloc-background-color
border: 1px solid $bloc-light-color
padding: 6px 4px
margin-bottom: 4px
font-size: 1rem
font-weight: 400
&:hover, &:focus
background: white
border-color: $main-color-light
img
width: 70px
float: left
h2
font-weight: 400
padding: 1rem 2rem
color: white
button
float: right
margin: 10px
&.last-child
margin-right: 0
&.submit-changes
@extend button.color-1
&.toggle-priv-key
@extend button.color-2
.secret-key-container
text-align: left !important
font-size: 1rem!important
.secret-key
clear: both
margin: 20px 0
background: white
text-align: left !important
font-size: 1rem!important
padding: 10px
.label
clear: both
display: block
font-weight: 500
margin: 20px 0

79
sass/pages/_profile.sass

@ -0,0 +1,79 @@ @@ -0,0 +1,79 @@
// PAGE PROFILE
.forEdition.profile-card
padding: 0
background: none
background: $bloc-light-color
+box-shadow(1px 2px 2px rgba(#111, 0.1))
@extend .clear-fix
.profile-card-main
@extend .clear-fix
padding: 20px
margin: 0 0 1px 0
input
display: block
margin: 0 0 10px 100px
width: 600px
background: $bloc-background-color
border: 1px solid $bloc-light-color
padding: 6px 4px
margin-bottom: 4px
font-size: 1rem
font-weight: 400
&:hover, &:focus
background: white
border-color: $main-color-light
img
width: 70px
float: left
h2
font-weight: 400
+background-image(linear-gradient(to left , $color-green, #5E80A2) )
padding: 1rem 2rem
color: white
h3
font-weight: 600
margin-top: 2*$space
padding: 0 1.5rem
+box-sizing(content-box)
&:after
display: block
content: ''
height: 1px
width: 100%
background: rgba(#5F81A1,.5)
margin-top: $space
button
float: right
margin: 10px
&.last-child
margin-right: 0
&.submit-changes
@extend button.color-1
&.toggle-priv-key
@extend button.color-2
.secret-key-container
text-align: left !important
font-size: 1rem!important
clear: both
padding: 10px
.label
clear: both
display: block
float: left
font-weight: 700
margin-right: 20px
.secret-key
@extend samp
Loading…
Cancel
Save