forked from projects/fipamo
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;
|
border-radius: 5px;
|
||||||
font: 18px var(--base-type);
|
font: 18px var(--base-type);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--secondary);
|
background: var(--primary);
|
||||||
color: var(--primary);
|
color: var(--secondar);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: var(--primary);
|
color: var(--secondary);
|
||||||
background: var(--secondary);
|
background: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
|
|
|
@ -10,10 +10,10 @@ article[class="settings"] h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
article[class="settings"] label {
|
article[class="settings"] label {
|
||||||
color: var(--secondary);
|
color: var(--primary);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 400;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.settings div.tab-toolbar button {
|
article.settings div.tab-toolbar button {
|
||||||
|
@ -25,7 +25,7 @@ article.settings div.tab-toolbar button {
|
||||||
article.settings section.settings-tabs section.section-tab {
|
article.settings section.settings-tabs section.section-tab {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
background: var(--secondary-highlight);
|
background: var(--secondary);
|
||||||
color: var(--secondary);
|
color: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,36 +35,42 @@ article.settings section.settings-tabs section.section-tab {
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
/* REFACTOR: i know, i know, it's just a placeholder*/
|
||||||
|
display: none !important;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#member-profile {
|
section#member-profile {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
grid-auto-columns: auto;
|
grid-auto-columns: auto;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 10px auto;
|
margin: 0 auto;
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#member-profile > div:nth-child(1) {
|
section#member-profile > div:nth-child(1) {
|
||||||
grid-column: 1/2;
|
grid-column: 1/2;
|
||||||
grid-row: 1/3;
|
grid-row: 1/2;
|
||||||
|
height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#member-profile > div:nth-child(2) {
|
section#member-profile > div:nth-child(2) {
|
||||||
grid-column: 2/4;
|
grid-column: 2/4;
|
||||||
grid-row: 1/3;
|
grid-row: 1/2;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#member-profile > div:nth-child(3) {
|
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) {
|
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 {
|
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) {
|
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) {
|
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;
|
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;
|
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,
|
section#member-profile > div[class="member-avatar"] div,
|
||||||
|
@ -109,11 +130,6 @@ section#member-profile div input[type="text"] {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[class="member-settings"] div textarea {
|
|
||||||
width: 98.4%;
|
|
||||||
height: 63%;
|
|
||||||
}
|
|
||||||
|
|
||||||
article[class="settings"] button {
|
article[class="settings"] button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
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='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='email' id='settings-email' placeholder='email' value="{{ $member['email'] }}" autofocus/>
|
||||||
<input type='hidden' name='member-id' id='member-id' value="{{ $member['id'] }}"/>
|
<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-url' id='settings-url' placeholder='url' value="{{ $baseUrl }}" autofocus/>
|
||||||
<input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ $siteTitle }}" 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>
|
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ $desc }}</textarea>
|
||||||
</div>
|
</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>
|
||||||
<section id="member-features" class="section-tab hide">
|
<section id="member-features" class="section-tab hide">
|
||||||
MEMBER FEATURES
|
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">
|
<div class="features">
|
||||||
@if(isset($apiStatus) && $apiStatus == 'true')
|
@if(isset($apiStatus) && $apiStatus == 'true')
|
||||||
<button id="api-access-toggle" title="allow external api" data-enabled="true">
|
<button id="api-access-toggle" title="allow external api" data-enabled="true">
|
||||||
|
@ -86,25 +80,19 @@
|
||||||
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<div class="theme">
|
<div>
|
||||||
<label>Themes</label><br/>
|
<button id="create-backup">
|
||||||
@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">
|
<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>
|
</svg>
|
||||||
<span>{{ $theme['display-name'] }}</span>
|
<span>CREATE BACKUP</span>
|
||||||
</button><a target="_blank" href='/theme'>Edit</a>
|
</button><br/>
|
||||||
|
@if($lastBackup != '')
|
||||||
|
LAST BACK UP<br/>
|
||||||
|
<a href="/api/v1/backup/download">{{ $lastBackup }}</a><br/>
|
||||||
@else
|
@else
|
||||||
<button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
|
<span>span No back ups. Frowny face.</span>
|
||||||
<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
|
@endif
|
||||||
@endforeach
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mail">
|
<div class="mail">
|
||||||
<label>Email</label><br/>
|
<label>Email</label><br/>
|
||||||
|
@ -131,15 +119,31 @@
|
||||||
<span>TEST MAIL</span>
|
<span>TEST MAIL</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</section>
|
||||||
<label>API KEY</label>
|
<section id="member-themes" class="section-tab hide">
|
||||||
<br/>
|
MEMBER THEMES
|
||||||
{{ $member['key'] }}
|
<div class="theme">
|
||||||
<br/>
|
<label>Themes</label><br/>
|
||||||
<label>FORM TOKEN</label><br/>
|
@foreach($themes as $theme)
|
||||||
{{ $ftoken }}
|
@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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</section>
|
||||||
</article>
|
</article>
|
||||||
@endsection
|
@endsection
|
||||||
@section('scripting')
|
@section('scripting')
|
||||||
|
|
Loading…
Reference in a new issue