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

update to fit profile-edit.html to #/account modal conversion

nin-v2
Simon Grim 6 years ago
parent
f398a0c84a
commit
79ccb80409
6 changed files with 103 additions and 188 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. 161
      css/style.css
  2. 4
      js/theme_option.js
  3. 43
      sass/layout/_account.sass
  4. 2
      sass/layout/_profile.sass
  5. 79
      sass/pages/_profile.sass
  6. 2
      sass/style.sass

161
css/style.css
Unescape View File

@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, .forEdition.profile-card .secret-key-container .secret-key,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, .profile-bio, center,
dl, dt, dd, ol, ul, li,
@ -318,7 +318,7 @@ textarea, input { @@ -318,7 +318,7 @@ textarea, input {
font-size: 0.8rem;
}
samp, .forEdition.profile-card .secret-key-container .secret-key {
samp {
background: #3E3C42;
color: white;
font-size: 11px;
@ -356,7 +356,7 @@ h3 .isFollowing:after { @@ -356,7 +356,7 @@ h3 .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, .mini-profile .post-area .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, .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, .mini-profile .post-area .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content: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;
@ -1452,6 +1452,60 @@ button.light:hover, a.button.light:hover { @@ -1452,6 +1452,60 @@ button.light:hover, a.button.light:hover {
border-color: #687b40;
}
/********* ACCOUNT MODAL ******** */
.account-modal .module {
margin: 4px;
}
.account-modal .module > div {
margin: 4px 0;
padding: 4px 12px;
}
.account-modal input, .account-modal textarea {
display: block;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 320px;
margin: 12px 16px;
padding: 2px 4px;
}
.account-modal textarea {
width: 320px;
max-width: 320px;
min-width: 320px;
min-height: 28px;
}
.account-modal input:focus, .account-modal textarea:focus {
border-bottom: solid 1px #A1B775;
}
.account-modal .alias {
margin: 0px 16px;
}
.account-modal .avatar {
cursor: pointer;
width: 64px;
height: 64px;
overflow: hidden;
margin: 12px 16px;
}
.account-modal .avatar img {
width: 64px;
height: auto;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.account-modal .c-buttons {
text-align: right;
}
.account-modal .toggle-secret-key {
float: left;
}
.account-modal .secret-key-container {
text-align: center;
font-size: 12px;
}
.account-modal .secret-key {
background-color: #A1B775;
font-weight: bold;
}
/****** LOGIN TO ACCOUNT MODAL ***** */
.login-modal .module {
margin: 4px;
@ -1575,10 +1629,6 @@ button.light:hover, a.button.light:hover { @@ -1575,10 +1629,6 @@ button.light:hover, a.button.light:hover {
float: left;
}
.profile-card-photo.forEdition {
float: none;
}
.profile-bio {
text-align: left;
font-size: 0.9rem;
@ -2200,103 +2250,6 @@ button.light:hover, a.button.light:hover { @@ -2200,103 +2250,6 @@ button.light:hover, a.button.light:hover {
font-size: 11px;
}
.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 {
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 {
display: block;
content: "";
height: 1px;
width: 100%;
background: rgba(95, 129, 161, 0.5);
margin-top: 1rem;
}
.forEdition.profile-card button {
float: right;
margin: 10px;
}
.forEdition.profile-card button.last-child {
margin-right: 0;
}
.forEdition.profile-card button.submit-changes {
background: #A1B775;
border-color: #96ae64;
color: white;
font-weight: 500;
}
.forEdition.profile-card button.submit-changes:hover {
border-color: #687b40;
}
.forEdition.profile-card button.toggle-priv-key {
background: #64676C;
border-color: #585a5f;
color: white;
font-weight: 500;
}
.forEdition.profile-card button.toggle-priv-key:hover {
border-color: #3f4144;
}
.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;
}
/********** LOGIN AND NETWORK PAGES ****** */
.network.singleBlock ul {
line-height: 2rem;

4
js/theme_option.js
Unescape View File

@ -89,8 +89,8 @@ function reOrganizeTemplates() { // for nin's templating @@ -89,8 +89,8 @@ function reOrganizeTemplates() { // for nin's templating
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
///// page profile
$('.forEdition .profile-card-main h2').detach().insertBefore($('.profile-card-main'));
twister.tmpl.accountMC.find('.alias')
.insertBefore(twister.tmpl.accountMC.find('.avatar'));
//loader
newLoader()

43
sass/layout/_account.sass
Unescape View File

@ -0,0 +1,43 @@ @@ -0,0 +1,43 @@
/********* ACCOUNT MODAL *********/
.account-modal
.module
margin: 4px
> div
margin: 4px 0
padding: 4px 12px
input, textarea
display: block
border: 1px solid rgba(0, 0, 0, .1)
width: 320px
margin: 12px 16px
padding: 2px 4px
textarea
width: 320px
max-width: 320px
min-width: 320px
min-height: 28px
input:focus, textarea:focus
border-bottom: solid 1px $main-color-color
.alias
margin: 0px 16px
.avatar
cursor: pointer
width: 64px
height: 64px
overflow: hidden
margin: 12px 16px
img
width: 64px
height: auto
border: 1px solid rgba(0, 0, 0, .1)
.c-buttons
text-align: right
.toggle-secret-key
float: left
.secret-key-container
text-align: center
font-size: 12px
.secret-key
background-color: $color-green
font-weight: bold

2
sass/layout/_profile.sass
Unescape View File

@ -89,8 +89,6 @@ $modal-postboard-post-height: 100% @@ -89,8 +89,6 @@ $modal-postboard-post-height: 100%
margin: 0 10px 10px 0
display: block
float: left
.profile-card-photo.forEdition
float: none
.profile-bio
@extend i

79
sass/pages/_profile.sass
Unescape View File

@ -1,79 +0,0 @@ @@ -1,79 +0,0 @@
// 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
@include button-color-basic
&.toggle-priv-key
@include button-color-basic(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

2
sass/style.sass
Unescape View File

@ -14,6 +14,7 @@ @@ -14,6 +14,7 @@
@import 'layout/_menu'
@import 'layout/_wrapper'
@import 'layout/_modal'
@import 'layout/_account'
@import 'layout/_login'
@import 'layout/_profile'
@import 'layout/_postboard'
@ -21,7 +22,6 @@ @@ -21,7 +22,6 @@
// pages
@import 'pages/_profile'
@import 'pages/_network'
@import 'layout/_tabs'

Write Preview
Loading…
Cancel
Save