Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 22:49:01 -05:00
Code Issues Activity

create styles for user settings profile

Browse source
This commit is contained in:
elhombretecla 2016-03-03 21:25:19 +01:00
parent cbad13fc20
commit b33ca03af7
3 changed files with 91 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/styles/main.scss
View file

@ -44,6 +44,7 @@
@import 'partials/sidebar-document-history';
@import 'partials/dashboard-bar';
@import 'partials/dashboard-grid';
@import 'partials/user-settings';
@import 'partials/activity-bar';
@import 'partials/library-bar';
@import 'partials/lightbox';

69
resources/styles/partials/user-settings.scss Normal file
View file

@ -0,0 +1,69 @@
.user-settings {
flex-direction: column;
}
.user-settings-nav {
display: flex;
.user-settings-nav-inside {
align-items: center;
display: flex;
margin: 0 auto;
li {
background-color: transparent;
border: 1px solid $medium-ui-border;
border-radius: $br-small;
cursor: pointer;
margin: $medium;
padding: $small $medium;
&:hover {
background-color: $primary-ui-bg;
border-color: transparent;
}
&.current {
background-color: $main-ui-color;
border: 0;
color: $color-white;
}
}
}
}
.user-settings-content {
display: flex;
flex-direction: column;
margin: 0 auto;
width: 500px;
.user-settings-label {
border-bottom: 1px solid $soft-ui-border;
font-weight: bold;
margin: $x-small 0 $medium 0;
padding: $medium;
}
.input-text {
color: $intense-ui-text;
}
}
.avatar-form {
align-items: center;
display: flex;
img {
border-radius: 50%;
flex-shrink: 0;
height: 120px;
margin-right: $medium;
width: 120px;
}
}

28
src/uxbox/ui/settings.cljs
View file

@ -19,14 +19,28 @@
(html
[:main.dashboard-main
(header)
[:section.dashboard-content
[:ul
[:li {:on-click #(r/go :settings/profile)} "Profile"]
[:li {:on-click #(r/go :settings/password)} "Password"]
[:li {:on-click #(r/go :settings/notifications)} "Notifications"]]
[:section.dashboard-content.user-settings
[:div.user-settings-nav
[:ul.user-settings-nav-inside
[:li.current {:on-click #(r/go :settings/profile)} "Profile"]
[:li {:on-click #(r/go :settings/password)} "Password"]
[:li {:on-click #(r/go :settings/notifications)} "Notifications"]]]
[:section.dashboard-grid.library
[:span "TODO 1"]]]]))
[:section.user-settings-content
[:span.user-settings-label "Your avatar"]
[:form.avatar-form
[:img {:src "images/favicon.png" :border "0"}]
[:input {:type "file"}]]
[:span.user-settings-label "Name"]
[:input.input-text {:type "text" :placeholder "Your name"}]
[:span.user-settings-label "Username"]
[:input.input-text {:type "text" :placeholder "Your username"}]
[:span.user-settings-label "Email"]
[:input.input-text {:type "email" :placeholder "Your email"}]
[:span.user-settings-label "Choose a color theme"]
[:span "TODO RADIO BUTTONS"]
[:input.btn-primary {:type "submit" :value "Update settings"}]
]]]))
(def ^:static profile-page
(mx/component