From 15d6ea4102cc06876153c0f644634a4630f0aabc Mon Sep 17 00:00:00 2001 From: myleneb Date: Sat, 8 Aug 2015 09:54:33 +0200 Subject: [PATCH] profile page --- css/style.css | 145 +++++++++++++++++++++----------------- js/theme_option.js | 2 +- sass/layout/_profile.sass | 58 --------------- sass/pages/_profile.sass | 79 +++++++++++++++++++++ 4 files changed, 162 insertions(+), 122 deletions(-) create mode 100644 sass/pages/_profile.sass diff --git a/css/style.css b/css/style.css index f0ab8a8..b34a678 100644 --- a/css/style.css +++ b/css/style.css @@ -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 { 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 { 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 { .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 { 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; diff --git a/js/theme_option.js b/js/theme_option.js index cd65936..a5d568b 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -92,7 +92,7 @@ function reOrganizeTemplates() { // for nin's templating //$('.userMenu li > a').wrapInner(''); ///// page profile - $('.forEdition h2').detach().prependTo($('.forEdition')); + $('.profile-card-main h2').detach().insertBefore($('.profile-card-main')); //loader newLoader() diff --git a/sass/layout/_profile.sass b/sass/layout/_profile.sass index 34f5931..c252dd7 100644 --- a/sass/layout/_profile.sass +++ b/sass/layout/_profile.sass @@ -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 diff --git a/sass/pages/_profile.sass b/sass/pages/_profile.sass new file mode 100644 index 0000000..3e0fef8 --- /dev/null +++ b/sass/pages/_profile.sass @@ -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