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:
ro 2024-05-22 15:15:21 -06:00
parent ab158c99b0
commit 428e74ae60
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
3 changed files with 155 additions and 135 deletions

View file

@ -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,

View file

@ -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;

View file

@ -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')