member profile tab styled
redid the css for the member profile tab under settings. responsive style still need to be addressed, but that will happen after all tabs have been converted to the new layout
This commit is contained in:
parent
ab158c99b0
commit
428e74ae60
3 changed files with 155 additions and 135 deletions
|
|
@ -18,15 +18,15 @@ input[type="text"] {
|
|||
border-radius: 5px;
|
||||
font: 18px var(--base-type);
|
||||
display: inline-block;
|
||||
background: var(--secondary);
|
||||
color: var(--primary);
|
||||
background: var(--primary);
|
||||
color: var(--secondar);
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
color: var(--primary);
|
||||
background: var(--secondary);
|
||||
color: var(--secondary);
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ article[class="settings"] h1 {
|
|||
}
|
||||
|
||||
article[class="settings"] label {
|
||||
color: var(--secondary);
|
||||
color: var(--primary);
|
||||
margin-bottom: 10px;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
article.settings div.tab-toolbar button {
|
||||
|
|
@ -25,7 +25,7 @@ article.settings div.tab-toolbar button {
|
|||
article.settings section.settings-tabs section.section-tab {
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
background: var(--secondary-highlight);
|
||||
background: var(--secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
|
|
@ -35,36 +35,42 @@ article.settings section.settings-tabs section.section-tab {
|
|||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
/* REFACTOR: i know, i know, it's just a placeholder*/
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
section#member-profile {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-columns: auto;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 10px auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(1) {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/3;
|
||||
grid-row: 1/2;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(2) {
|
||||
grid-column: 2/4;
|
||||
grid-row: 1/3;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(3) {
|
||||
grid-row: 1/3;
|
||||
grid-column: 1/2;
|
||||
grid-row: 2/3;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(4) {
|
||||
color: var(--white);
|
||||
grid-column: 2/3;
|
||||
grid-row: 2/3;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(4) a {
|
||||
|
|
@ -74,22 +80,37 @@ section#member-profile > div:nth-child(4) a {
|
|||
}
|
||||
|
||||
section#member-profile > div:nth-child(5) {
|
||||
grid-column: 2/4;
|
||||
grid-column: 3/4;
|
||||
grid-row: 2/3;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(6) {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(7) {
|
||||
grid-column: 3/5;
|
||||
min-height: 325px;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(8) {
|
||||
grid-column: 1/4;
|
||||
color: var(--white);
|
||||
grid-row: 3/4;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(6) div {
|
||||
display: inline-block;
|
||||
color: var(--secondary);
|
||||
word-wrap: break-word;
|
||||
vertical-align: top;
|
||||
width: 49.6%;
|
||||
}
|
||||
|
||||
section#member-profile > div:nth-child(6) div > span {
|
||||
display: block;
|
||||
background: var(--primary);
|
||||
color: var(--secondary);
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section#member-profile > div textarea {
|
||||
width: 98.4%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
section#member-profile > div[class="member-avatar"] div,
|
||||
|
|
@ -109,11 +130,6 @@ section#member-profile div input[type="text"] {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section[class="member-settings"] div textarea {
|
||||
width: 98.4%;
|
||||
height: 63%;
|
||||
}
|
||||
|
||||
article[class="settings"] button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -23,34 +23,28 @@
|
|||
<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='hidden' name='member-id' id='member-id' value="{{ $member['id'] }}"/>
|
||||
</div>
|
||||
<div>
|
||||
<input type='text' name='base-url' id='settings-url' placeholder='url' value="{{ $baseUrl }}" autofocus/>
|
||||
<input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ $siteTitle }}" autofocus/>
|
||||
</div>
|
||||
<div>
|
||||
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ $desc }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label>API KEY</label>
|
||||
<span>{{ $member['key'] }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>FORM TOKEN</label><br/>
|
||||
<span>{{ $ftoken }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section id="member-features" class="section-tab hide">
|
||||
MEMBER FEATURES
|
||||
</section>
|
||||
<section id="member-themes" class="section-tab hide">
|
||||
MEMBER THEMES
|
||||
</section>
|
||||
</section>
|
||||
<section class="member-settings">
|
||||
|
||||
<div>
|
||||
<button id="create-backup">
|
||||
<svg id="nav-menu-icon" class="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-back-in-time"/>
|
||||
</svg>
|
||||
<span>CREATE BACKUP</span>
|
||||
</button><br/>
|
||||
@if($lastBackup != '')
|
||||
LAST BACK UP<br/>
|
||||
<a href="/api/v1/backup/download">{{ $lastBackup }}</a><br/>
|
||||
@else
|
||||
<span>span No back ups. Frowny face.</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="features">
|
||||
@if(isset($apiStatus) && $apiStatus == 'true')
|
||||
<button id="api-access-toggle" title="allow external api" data-enabled="true">
|
||||
|
|
@ -86,25 +80,19 @@
|
|||
|
||||
@endif
|
||||
</div>
|
||||
<div class="theme">
|
||||
<label>Themes</label><br/>
|
||||
@foreach($themes as $theme)
|
||||
@if($theme['name'] == $currentTheme)
|
||||
<button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
|
||||
<div>
|
||||
<button id="create-backup">
|
||||
<svg id="nav-menu-icon" class="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-back-in-time"/>
|
||||
</svg>
|
||||
<span>{{ $theme['display-name'] }}</span>
|
||||
</button><a target="_blank" href='/theme'>Edit</a>
|
||||
<span>CREATE BACKUP</span>
|
||||
</button><br/>
|
||||
@if($lastBackup != '')
|
||||
LAST BACK UP<br/>
|
||||
<a href="/api/v1/backup/download">{{ $lastBackup }}</a><br/>
|
||||
@else
|
||||
<button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
|
||||
<svg id="nav-menu-icon" class="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
|
||||
</svg>
|
||||
<span>{{ $theme['display-name'] }}</span>
|
||||
</button>
|
||||
<span>span No back ups. Frowny face.</span>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="mail">
|
||||
<label>Email</label><br/>
|
||||
|
|
@ -131,15 +119,31 @@
|
|||
<span>TEST MAIL</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<label>API KEY</label>
|
||||
<br/>
|
||||
{{ $member['key'] }}
|
||||
<br/>
|
||||
<label>FORM TOKEN</label><br/>
|
||||
{{ $ftoken }}
|
||||
</section>
|
||||
<section id="member-themes" class="section-tab hide">
|
||||
MEMBER THEMES
|
||||
<div class="theme">
|
||||
<label>Themes</label><br/>
|
||||
@foreach($themes as $theme)
|
||||
@if($theme['name'] == $currentTheme)
|
||||
<button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
|
||||
<svg id="nav-menu-icon" class="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
|
||||
</svg>
|
||||
<span>{{ $theme['display-name'] }}</span>
|
||||
</button><a target="_blank" href='/theme'>Edit</a>
|
||||
@else
|
||||
<button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
|
||||
<svg id="nav-menu-icon" class="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
|
||||
</svg>
|
||||
<span>{{ $theme['display-name'] }}</span>
|
||||
</button>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</article>
|
||||
@endsection
|
||||
@section('scripting')
|
||||
|
|
|
|||
Loading…
Reference in a new issue