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,123 +23,127 @@
|
||||||
<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
|
||||||
|
<div class="features">
|
||||||
|
@if(isset($apiStatus) && $apiStatus == 'true')
|
||||||
|
<button id="api-access-toggle" title="allow external api" data-enabled="true">
|
||||||
|
<svg id="nav-menu-icon" class="icon">
|
||||||
|
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
|
||||||
|
</svg>
|
||||||
|
<span id="api-status">API ACCESS ENABLED</span>
|
||||||
|
</button>
|
||||||
|
@else
|
||||||
|
<button id="api-access-toggle" title="allow external api" data-enabled="false">
|
||||||
|
<svg id="nav-menu-icon" class="icon">
|
||||||
|
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
|
||||||
|
</svg>
|
||||||
|
<span id="api-status">API ACCESS NOT ENABLED</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
@endif
|
||||||
|
@if(isset($dynamicRenderStatus) && $dynamicRenderStatus == 'true')
|
||||||
|
<button id="dynamic-render-toggle" title="allow external api" data-enabled="true">
|
||||||
|
<svg id="nav-menu-icon" class="icon">
|
||||||
|
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cycle"/>
|
||||||
|
</svg>
|
||||||
|
<span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
@else
|
||||||
|
<button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
|
||||||
|
<svg id="nav-menu-icon" class="icon">
|
||||||
|
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cycle"/>
|
||||||
|
</svg>
|
||||||
|
<span id="dynamic-render-status">STATIC PAGE RENDERING</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
<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="mail">
|
||||||
|
<label>Email</label><br/>
|
||||||
|
@if($mailOption == "option-none" or $mailOption == "")
|
||||||
|
<a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>
|
||||||
|
@else
|
||||||
|
<a href="#" class="mail-option" id="option-none" data-enabled="false">NONE</a>
|
||||||
|
@endif
|
||||||
|
@if($mailOption == "option-mg" or $mailOption == "")
|
||||||
|
<a href="#" class="mail-option" id="option-mg" data-enabled="true">MAILGUN</a>
|
||||||
|
@else
|
||||||
|
<a href="#" class="mail-option" id="option-mg" data-enabled="false">MAILGUN</a>
|
||||||
|
@endif
|
||||||
|
@if($mailOption == "option-smtp" or $mailOption == "")
|
||||||
|
<a href="#" class="mail-option" id="option-smtp" data-enabled="true">SMTP</a>
|
||||||
|
@else
|
||||||
|
<a href="#" class="mail-option" id="option-smtp" data-enabled="false">SMTP</a>
|
||||||
|
@endif
|
||||||
|
@include('forms.mailforms')
|
||||||
|
<button id="send-mail">
|
||||||
|
<svg id="nav-menu-icon" class="icon">
|
||||||
|
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-mail-with-circle"/>
|
||||||
|
</svg>
|
||||||
|
<span>TEST MAIL</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="member-themes" class="section-tab hide">
|
<section id="member-themes" class="section-tab hide">
|
||||||
MEMBER THEMES
|
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>
|
||||||
</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">
|
|
||||||
<svg id="nav-menu-icon" class="icon">
|
|
||||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
|
|
||||||
</svg>
|
|
||||||
<span id="api-status">API ACCESS ENABLED</span>
|
|
||||||
</button>
|
|
||||||
@else
|
|
||||||
<button id="api-access-toggle" title="allow external api" data-enabled="false">
|
|
||||||
<svg id="nav-menu-icon" class="icon">
|
|
||||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
|
|
||||||
</svg>
|
|
||||||
<span id="api-status">API ACCESS NOT ENABLED</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
@endif
|
|
||||||
@if(isset($dynamicRenderStatus) && $dynamicRenderStatus == 'true')
|
|
||||||
<button id="dynamic-render-toggle" title="allow external api" data-enabled="true">
|
|
||||||
<svg id="nav-menu-icon" class="icon">
|
|
||||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cycle"/>
|
|
||||||
</svg>
|
|
||||||
<span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
@else
|
|
||||||
<button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
|
|
||||||
<svg id="nav-menu-icon" class="icon">
|
|
||||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cycle"/>
|
|
||||||
</svg>
|
|
||||||
<span id="dynamic-render-status">STATIC PAGE RENDERING</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
@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">
|
|
||||||
<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 class="mail">
|
|
||||||
<label>Email</label><br/>
|
|
||||||
@if($mailOption == "option-none" or $mailOption == "")
|
|
||||||
<a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>
|
|
||||||
@else
|
|
||||||
<a href="#" class="mail-option" id="option-none" data-enabled="false">NONE</a>
|
|
||||||
@endif
|
|
||||||
@if($mailOption == "option-mg" or $mailOption == "")
|
|
||||||
<a href="#" class="mail-option" id="option-mg" data-enabled="true">MAILGUN</a>
|
|
||||||
@else
|
|
||||||
<a href="#" class="mail-option" id="option-mg" data-enabled="false">MAILGUN</a>
|
|
||||||
@endif
|
|
||||||
@if($mailOption == "option-smtp" or $mailOption == "")
|
|
||||||
<a href="#" class="mail-option" id="option-smtp" data-enabled="true">SMTP</a>
|
|
||||||
@else
|
|
||||||
<a href="#" class="mail-option" id="option-smtp" data-enabled="false">SMTP</a>
|
|
||||||
@endif
|
|
||||||
@include('forms.mailforms')
|
|
||||||
<button id="send-mail">
|
|
||||||
<svg id="nav-menu-icon" class="icon">
|
|
||||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-mail-with-circle"/>
|
|
||||||
</svg>
|
|
||||||
<span>TEST MAIL</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>API KEY</label>
|
|
||||||
<br/>
|
|
||||||
{{ $member['key'] }}
|
|
||||||
<br/>
|
|
||||||
<label>FORM TOKEN</label><br/>
|
|
||||||
{{ $ftoken }}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</article>
|
</article>
|
||||||
@endsection
|
@endsection
|
||||||
@section('scripting')
|
@section('scripting')
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue