projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

updated styles for dash index and settings pages

Browse source
This commit is contained in:
Ro 2019-02-07 19:18:48 -05:00
parent fc1e44ad73
commit fc59ab90f6
9 changed files with 209 additions and 334 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
themes/dash/assets/css/dash.css
View file

@ -1811,16 +1811,26 @@ svg.icons {
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a label {
font-size: 0.7em;
font-weight: 500;
font-weight: 700;
color: #161d23;
padding: 5px;
vertical-align: top;
display: block;
display: inline-block;
width: 60%;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a span {
float: right;
vertical-align: top;
display: inline-block;
font-family: "Apercu-mono";
font-size: 0.5em;
padding: 7px;
color: #161d23;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a div {
width: 100%;
background-size: cover;
border-radius: 3px;
border-radius: 3px 3px 0 0;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(2) {
width: 100%;
@ -1838,7 +1848,7 @@ svg.icons {
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
width: 50%;
width: 50.6%;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4) div,
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) div {
@ -1847,83 +1857,6 @@ svg.icons {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
margin: -305px 0 0 49.3%;
}
.folio-project-form {
display: inline-block;
width: 56%;
}
.folio-project-form input[type=email],
.folio-project-form input[type=password],
.folio-project-form input[type=text],
.folio-project-form select {
width: 400px;
}
.folio-project-form select {
margin: 10px 0 0 0;
}
.folio-project-form textarea {
width: 400px;
height: 133px;
}
.folio-hub {
padding: 20px;
}
.folio-hub span {
margin: 10px 10px 0 0;
}
.folio-hub .btn-add-project span {
font: 20px $bodyType;
margin: -35px 0 0 40px;
display: block;
height: 50px;
}
.folio-hub .project-list {
width: 95%;
}
.folio-hub .project-list span.drag-handle {
padding: 10px;
color: #f5ab35;
cursor: pointer;
}
.folio-hub .project-list .project-item {
width: 100%;
display: inline-block;
background: #28343e;
padding: 5px;
margin-bottom: 10px;
border-radius: 5px;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.folio-hub .project-list .project-item:hover {
background: #3b4e5e;
}
.upload-list {
color: #c1cdd7;
display: inline-block;
vertical-align: top;
width: 260px;
height: 330px;
margin: 45px 0 0;
}
.thumb {
height: 50px;
overflow: hidden;
border-radius: 3px;
margin: 10px 5px 0 0;
}
.upload-drop {
width: 400px;
height: 70px;
background: $form-background;
color: #c1cdd7;
text-align: center;
padding: 40px 0 0;
font-size: 12px;
text-transform: uppercase;
border-radius: 3px;
}
/**
-------------------------------
-- Settings
@ -1965,105 +1898,95 @@ svg.icons {
}
#settings-index #settings-index-wrapper #member-settings,
#settings-index #settings-index-wrapper #site-settings,
#settings-index #settings-index-wrapper #theme-settings,
#settings-index #settings-index-wrapper #mail-settings {
#settings-index #settings-index-wrapper #option-settings {
background: #374857;
padding: 5px;
border-radius: 5px 0 5px 0;
width: 100%;
margin-bottom: 40px;
margin: 20px auto;
}
#settings-index #settings-index-wrapper #member-settings label,
#settings-index #settings-index-wrapper #site-settings label,
#settings-index #settings-index-wrapper #theme-settings label,
#settings-index #settings-index-wrapper #mail-settings label {
#settings-index #settings-index-wrapper #option-settings label {
font-family: 'Apercu-Mono';
color: #f2f1ef;
}
#settings-index #settings-index-wrapper #member-settings input,
#settings-index #settings-index-wrapper #site-settings input,
#settings-index #settings-index-wrapper #theme-settings input,
#settings-index #settings-index-wrapper #mail-settings input {
width: 44%;
margin-right: 5px;
#settings-index #settings-index-wrapper #option-settings input {
width: 95%;
margin: 0 5px 10px 0;
height: 30px;
padding: 10px;
}
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop,
#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop {
#settings-index #settings-index-wrapper #option-settings #member-avatar-drop {
display: inline-block;
margin: 0 0 10px 0;
}
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop img,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop img,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop img,
#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop img {
width: 110px;
border-radius: 10px;
#settings-index #settings-index-wrapper #option-settings #member-avatar-drop img {
width: 100%;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
}
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop input,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop input,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop input,
#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop input {
#settings-index #settings-index-wrapper #option-settings #member-avatar-drop input {
visibility: hidden;
display: none;
}
#settings-index #settings-index-wrapper #member-settings #member-info,
#settings-index #settings-index-wrapper #site-settings #member-info,
#settings-index #settings-index-wrapper #theme-settings #member-info,
#settings-index #settings-index-wrapper #mail-settings #member-info {
#settings-index #settings-index-wrapper #option-settings #member-info {
vertical-align: top;
display: inline-block;
margin: 0 0 0 10px;
width: 79%;
width: 100%;
}
#settings-index #settings-index-wrapper #member-settings #member-info input,
#settings-index #settings-index-wrapper #site-settings #member-info input,
#settings-index #settings-index-wrapper #theme-settings #member-info input,
#settings-index #settings-index-wrapper #mail-settings #member-info input {
width: 94%;
#settings-index #settings-index-wrapper #option-settings #member-info input {
width: 95%;
margin: 0 5px 10px 0;
}
#settings-index #settings-index-wrapper #member-settings textarea,
#settings-index #settings-index-wrapper #site-settings textarea,
#settings-index #settings-index-wrapper #theme-settings textarea,
#settings-index #settings-index-wrapper #mail-settings textarea {
#settings-index #settings-index-wrapper #option-settings textarea {
background: #161d23;
width: 91.5%;
height: 100px;
width: 95%;
height: 155px;
color: #b2cce5;
margin-top: 10px;
padding: 10px;
}
#settings-index #settings-index-wrapper #theme-settings a[data-enabled='false'] {
width: 310px;
#settings-index #settings-index-wrapper #option-settings #theme-settings a {
width: 95%;
margin: 0 5px 5px 0;
height: 25px;
padding: 10px;
display: inline-block;
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='false'] {
background: #161d23;
color: #b2cce5;
border-radius: 3px;
}
#settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] {
width: 310px;
margin: 0 5px 5px 0;
height: 25px;
padding: 10px;
display: inline-block;
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='true'] {
background: #b2cce5;
color: #374857;
border-radius: 3px;
}
#settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] svg {
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='true'] svg {
fill: #374857;
display: inline-block;
float: right;
}
#settings-index #settings-index-wrapper #mail-settings {
height: 100px;
#settings-index #settings-index-wrapper #option-settings #mail-settings {
min-height: 240px;
}
#settings-index #settings-index-wrapper #mail-settings a.mail-option {
#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option {
float: right;
font-family: 'Apercu-Mono';
font-size: 0.9em;
@ -2071,17 +1994,17 @@ svg.icons {
text-decoration: none;
margin: 0 0 0 5px;
}
#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='true'] {
#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled='true'] {
color: #fc6399;
}
#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='false'] {
#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled='false'] {
color: #f2f1ef;
}
#settings-index #settings-index-wrapper #mail-settings input {
#settings-index #settings-index-wrapper #option-settings #mail-settings input {
margin: 0 5px 5px 0;
vertical-align: top;
}
#settings-index #settings-index-wrapper #mail-settings div[data-enabled='false'] {
#settings-index #settings-index-wrapper #option-settings #mail-settings div[data-enabled='false'] {
display: none;
visibility: hidden;
}

2
themes/dash/assets/css/dash.css.map
View file

File diff suppressed because one or more lines are too long

2
themes/dash/assets/js/dash.min.js vendored
View file

@ -9073,7 +9073,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "60240" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "55155" + '/');
ws.onmessage = function (event) {
var data = JSON.parse(event.data);

2
themes/dash/assets/js/dash.min.map
View file

File diff suppressed because one or more lines are too long

3
themes/dash/partials/front.pug
View file

@ -5,6 +5,7 @@
- var cap = 4; // number of respect posts to display
- for ( index; index < cap; index++)
a(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid)
div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center")
div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
label= items[index].post.title
span= items[index].post.created

102
themes/dash/settings.pug
View file

@ -7,57 +7,57 @@ block main-content
#settings-index
#settings-index-wrapper
#member-settings
label YOU
br
#member-avatar-drop
img#avatar(src=member.avi, for="avatar-upload")
input(id="avatar-upload" type="file" name="avatar-upload")
#member-info
input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus)
input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus)
#site-settings
label SITE INFO
br
input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus)
input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus)
textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus)
=settings.description
button#privacy-toggle(data-private=settings.private)
-if (settings.private == 'false')
| SITE IS PRIVATE
-else
| SITE IS PUBLIC
#theme-settings
label THEMES
br
- var index = 0;
- for ( index; index < themes.length; index++)
-if(themes[index].current == "true")
a.theme-select(href="#" id=themes[index].theme.name, data-enabled="true")
= themes[index].theme["display-name"]
//svg(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-check')
#member-settings.columns
#member-settings-1.column
label AVATAR
#member-avatar-drop
img#avatar(src=member.avi, for="avatar-upload")
button#save-toggle SAVE SETTINGS
input(id="avatar-upload" type="file" name="avatar-upload")
#member-settings-2.column
label INFO
#member-info
input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus)
input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus)
input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus)
input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus)
textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus)
=settings.description
button#privacy-toggle(data-private=settings.private)
-if (settings.private == 'false')
| SITE IS PRIVATE
-else
a.theme-select(href="#" id=themes[index].theme.name, data-enabled="false")
= themes[index].theme["display-name"]
#mail-settings
label MAIL SETTINGS
-if(settings.email.active == "option-none")
a.mail-option#option-none(href="#", data-enabled='true') NONE
-else
a.mail-option#option-none(href="#", data-enabled='false') NONE
-if(settings.email.active == "option-mg")
a.mail-option#option-mg(href="#", data-enabled='true') MAILGUN
-else
a.mail-option#option-mg(href="#", data-enabled='false') MAILGUN
-if(settings.email.active == "option-smtp")
a.mail-option#option-smtp(href="#", data-enabled='true') SMTP
-else
a.mail-option#option-smtp(href="#", data-enabled='false') SMTP
include partials/mailforms
| SITE IS PUBLIC
#option-settings.columns
#theme-settings.column
label THEMES
br
- var index = 0;
- for ( index; index < themes.length; index++)
-if(themes[index].current == "true")
a.theme-select(href="#" id=themes[index].theme.name, data-enabled="true")
= themes[index].theme["display-name"]
//svg(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-check')
-else
a.theme-select(href="#" id=themes[index].theme.name, data-enabled="false")
= themes[index].theme["display-name"]
#mail-settings.column
label E-MAIL
-if(settings.email.active == "option-none")
a.mail-option#option-none(href="#", data-enabled='true') NONE
-else
a.mail-option#option-none(href="#", data-enabled='false') NONE
-if(settings.email.active == "option-mg")
a.mail-option#option-mg(href="#", data-enabled='true') MAILGUN
-else
a.mail-option#option-mg(href="#", data-enabled='false') MAILGUN
-if(settings.email.active == "option-smtp")
a.mail-option#option-smtp(href="#", data-enabled='true') SMTP
-else
a.mail-option#option-smtp(href="#", data-enabled='false') SMTP
include partials/mailforms
button#send-mail TEST MAIL
br
button#send-mail SEND MAIL
button#save-toggle SAVE SETTINGS

48
themes/dash/src/com/controllers/SettingsIndex.js
View file

@ -54,19 +54,19 @@ export default class SettingsIndex
self.handleImageUpload(e.target.id, e.target.files);
}, false);
//handle privacy toggle
document.getElementById("privacy-toggle").addEventListener("click", e=>this.togglePrivacy(e));
document.getElementById("send-mail").addEventListener("click", e=>this.handleMailer(e));
document.getElementById("privacy-toggle").addEventListener("click", e => this.togglePrivacy(e));
document.getElementById("send-mail").addEventListener("click", e => this.handleMailer(e));
//handle theme toggle
let themeBtns = document.querySelectorAll('.theme-select');
for (var i = 0, length = themeBtns.length; i < length; i++)
{
themeBtns[i].addEventListener('click', e=>this.handleThemes(e));
themeBtns[i].addEventListener('click', e => this.handleThemes(e));
}
//handle mail options
let mailBtn = document.querySelectorAll('.mail-option');
for (var i = 0, length = mailBtn.length; i < length; i++)
{
mailBtn[i].addEventListener('click', e=>this.handleMailOptions(e));
mailBtn[i].addEventListener('click', e => this.handleMailOptions(e));
}
}
//--------------------------
@ -76,31 +76,31 @@ export default class SettingsIndex
{
e.stopPropagation();
e.preventDefault();
if(e.target.getAttribute('data-private') == "false")
if (e.target.getAttribute('data-private') == "false")
{
e.target.setAttribute('data-private', 'true');
e.target.innerHTML = "SITE IS PUBLIC"
}else{
}
else
{
e.target.setAttribute('data-private', 'false');
e.target.innerHTML = "SITE IS PRIVATE"
}
}
handleMailer()
{
this.mailer.sendMail();
}
handleThemes(e){
handleThemes(e)
{
e.stopPropagation();
e.preventDefault();
let themes = document.querySelectorAll('.theme-select');
for (var i = 0, length = themes.length; i < length; i++)
{
(e.target.id == themes[i].id) ? themes[i].setAttribute('data-enabled', 'true') : themes[i].setAttribute('data-enabled', 'false')
(e.target.id == themes[i].id) ? themes[i].setAttribute('data-enabled', 'true'): themes[i].setAttribute('data-enabled', 'false')
}
}
handleMailOptions(e)
{
e.preventDefault();
@ -110,24 +110,31 @@ export default class SettingsIndex
let mail = document.querySelectorAll('.mail-option');
for (var i = 0, length = mail.length; i < length; i++)
{
if(e.target.id == mail[i].id){
if (e.target.id == mail[i].id)
{
mail[i].setAttribute('data-enabled', 'true')
if (e.target.id == "option-smtp"){
if (e.target.id == "option-smtp")
{
smtp.setAttribute('data-enabled', 'true')
mailgun.setAttribute('data-enabled', 'false')
}else if(e.target.id == "option-none"){
}
else if (e.target.id == "option-none")
{
smtp.setAttribute('data-enabled', 'false')
mailgun.setAttribute('data-enabled', 'false')
}else{
}
else
{
smtp.setAttribute('data-enabled', 'false')
mailgun.setAttribute('data-enabled', 'true')
}
}else{
}
else
{
mail[i].setAttribute('data-enabled', 'false')
}
}
}
handleImageUpload(type, files)
{
let url = ""
@ -148,13 +155,14 @@ export default class SettingsIndex
this.dataUtils.request(url, eventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, imageData).then((response) =>
{
let r = JSON.parse(response.request['response']);
if(r.message == DataEvent.AVATAR_UPLOADED)
if (r.message == DataEvent.AVATAR_UPLOADED)
{
document.getElementById('avatar').src = r.url;
}else{
}
else
{
document.getElementById('background').src = r.url;
}
}).catch((err) =>
{
//console.log(err)

88
themes/dash/src/styles/main/_index.styl
View file

@ -84,16 +84,25 @@
label
font-size: .7em
font-weight: 500
font-weight: 700
color $primary - 60%
padding 5px
vertical-align: top
display: block
display: inline-block
width: 60%
span
float: right
vertical-align: top
display: inline-block
font-family: "Apercu-mono"
font-size: .5em
padding: 7px
color $primary - 60%
div
width 100%
background-size cover
border-radius 3px
border-radius 3px 3px 0 0
a:nth-child(2)
width 100%
@ -109,80 +118,9 @@
a:nth-child(4), a:nth-child(5)
width 50%
width 50.6%
div
height 275px
a:nth-child(5)
margin -305px 0 0 49.3%
.folio-project-form
display inline-block
width 56%
input[type=email], input[type=password], input[type=text], select
width 400px
select
margin 10px 0 0 0
textarea
width 400px
height 133px
.folio-hub
padding 20px
span
margin 10px 10px 0 0
.btn-add-project span
font 20px $bodyType
margin -35px 0 0 40px
display block
height 50px
.project-list
width 95%
span.drag-handle
padding 10px
color $tertiary
cursor pointer
.project-item
width 100%
display inline-block
background lightness($primary, 20%)
padding 5px
margin-bottom 10px
border-radius 5px
object-transitions(0.3s)
.project-item:hover
background lightness($primary, 30%)
.upload-list
color lightness($primary, 80%)
display inline-block
vertical-align top
width 260px
height 330px
margin 45px 0 0
.thumb
height 50px
overflow hidden
border-radius 3px
margin 10px 5px 0 0
.upload-drop
width 400px
height 70px
background $form-background
color lightness($primary, 80%)
text-align center
padding 40px 0 0
font-size 12px
text-transform uppercase
border-radius 3px

121
themes/dash/src/styles/main/_settings.styl
View file

@ -1,17 +1,19 @@
#site-background
margin 0 0 10px 0
img
width 100%
// border 5px solid $white
border-radius 0
overflow hidden
cursor pointer
label
position: absolute
position absolute
color $white
margin 5px
background $primary - 60%
padding: 5px
padding 5px
border-radius 3px
input
@ -31,27 +33,32 @@
width 320px
height 45px
#member-settings, #site-settings, #theme-settings, #mail-settings
#member-settings, #site-settings, #option-settings
background $primary
padding 5px
border-radius 5px 0 5px 0
label
font-family 'Apercu-Mono'
color $white
input
width 44%
margin-right 5px
width 95%
margin 0 5px 10px 0
height 30px
padding 10px
width 100%
margin-bottom 40px
margin 20px auto
#member-avatar-drop
display inline-block
margin 0 0 10px 0
img
width 110px
width 100%
// border 5px solid $white
border-radius 10px
border-radius 5px
overflow hidden
cursor pointer
@ -62,66 +69,64 @@
#member-info
vertical-align top
display inline-block
margin 0 0 0 10px
width 79%
width 100%
input
width 94%
width 95%
margin 0 5px 10px 0
textarea
background $primary - 60%
width 91.5%
height 100px
width 95%
height 155px
color $secondary
margin-top 10px
padding 10px
#theme-settings
a[data-enabled='false']
width 310px
margin 0 5px 5px 0
height 25px
padding 10px
display inline-block
background $primary - 60%
color $secondary
border-radius 3px
a[data-enabled='true']
width 310px
margin 0 5px 5px 0
height 25px
padding 10px
display inline-block
background $secondary
color $primary
border-radius 3px
svg
fill $primary
#option-settings
#theme-settings
a
width 95%
margin 0 5px 5px 0
height 25px
padding 10px
display inline-block
a[data-enabled='false']
background $primary - 60%
color $secondary
border-radius 3px
a[data-enabled='true']
background $secondary
color $primary
border-radius 3px
svg
fill $primary
display inline-block
float right
#mail-settings
min-height: 240px
a.mail-option
float right
font-family 'Apercu-Mono'
font-size 0.9em
border-radius 3px
text-decoration none
margin 0 0 0 5px
// padding: 1px
#mail-settings
height 100px
a.mail-option
float right
font-family 'Apercu-Mono'
font-size .9em
border-radius 3px
text-decoration: none
margin 0 0 0 5px
//padding: 1px
a.mail-option[data-enabled='true']
color $highlight
a.mail-option[data-enabled='false']
color $white
input
// width 94%
margin 0 5px 5px 0
vertical-align: top
a.mail-option[data-enabled='true']
color $highlight
div[data-enabled='false']
display none
visibility hidden
a.mail-option[data-enabled='false']
color $white
input
// width 94%
margin 0 5px 5px 0
vertical-align top
div[data-enabled='false']
display none
visibility hidden