Add tabs
This commit is contained in:
grandeljay
parent
0215a1cf96
commit
6a17231b0b
14 changed files with 2507 additions and 57 deletions
|
|
@ -51,6 +51,7 @@
|
|||
"popup",
|
||||
"message",
|
||||
"list",
|
||||
"tab",
|
||||
|
||||
"api",
|
||||
"transition"
|
||||
|
|
|
|||
5
semantic/dist/components/menu.css
vendored
5
semantic/dist/components/menu.css
vendored
|
|
@ -1969,6 +1969,11 @@ Floated Menu / Item
|
|||
border-top: 1px solid #D4D4D5;
|
||||
border-right: 1px solid #D4D4D5;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.stackable .ui.vertical.pointing.menu .item::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ui.pointing.menu .ui.dropdown .menu .item:after,
|
||||
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
||||
display: none;
|
||||
|
|
|
|||
2
semantic/dist/components/menu.min.css
vendored
2
semantic/dist/components/menu.min.css
vendored
File diff suppressed because one or more lines are too long
88
semantic/dist/components/tab.css
vendored
Normal file
88
semantic/dist/components/tab.css
vendored
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
/*!
|
||||
* # Fomantic-UI 2.8.8 - Tab
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
UI Tabs
|
||||
*******************************/
|
||||
|
||||
.ui.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------------
|
||||
Active
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.active,
|
||||
.ui.tab.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Loading
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.loading {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
min-height: 250px;
|
||||
}
|
||||
.ui.tab.loading * {
|
||||
position: relative !important;
|
||||
left: -10000px !important;
|
||||
}
|
||||
.ui.tab.loading:before,
|
||||
.ui.tab.loading.segment:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -1.25em 0 0 -1.25em;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.ui.tab.loading:after,
|
||||
.ui.tab.loading.segment:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -1.25em 0 0 -1.25em;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
-webkit-animation: loader 0.6s infinite linear;
|
||||
animation: loader 0.6s infinite linear;
|
||||
border: 0.2em solid #767676;
|
||||
border-radius: 500rem;
|
||||
-webkit-box-shadow: 0 0 0 1px transparent;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Tab Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
User Overrides
|
||||
*******************************/
|
||||
|
||||
1001
semantic/dist/components/tab.js
vendored
Normal file
1001
semantic/dist/components/tab.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
9
semantic/dist/components/tab.min.css
vendored
Normal file
9
semantic/dist/components/tab.min.css
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/*!
|
||||
* # Fomantic-UI 2.8.8 - Tab
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.tab{display:none}.ui.tab.active,.ui.tab.open{display:block}.ui.tab.loading{position:relative;overflow:hidden;display:block;min-height:250px}.ui.tab.loading *{position:relative!important;left:-10000px!important}.ui.tab.loading.segment:before,.ui.tab.loading:before{position:absolute;content:'';top:50%;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.tab.loading.segment:after,.ui.tab.loading:after{position:absolute;content:'';top:50%;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;-webkit-animation:loader .6s infinite linear;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}
|
||||
11
semantic/dist/components/tab.min.js
vendored
Normal file
11
semantic/dist/components/tab.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
90
semantic/dist/semantic.css
vendored
90
semantic/dist/semantic.css
vendored
|
|
@ -38184,6 +38184,12 @@ Floated Menu / Item
|
|||
border-right: 1px solid #D4D4D5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.stackable .ui.vertical.pointing.menu .item::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.pointing.menu .ui.dropdown .menu .item:after,
|
||||
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
||||
display: none;
|
||||
|
|
@ -40404,6 +40410,90 @@ Floated Menu / Item
|
|||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
/*!
|
||||
* # Fomantic-UI 2.8.8 - Tab
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
UI Tabs
|
||||
*******************************/
|
||||
|
||||
.ui.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------------
|
||||
Active
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.active,
|
||||
.ui.tab.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Loading
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.loading {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.ui.tab.loading * {
|
||||
position: relative !important;
|
||||
left: -10000px !important;
|
||||
}
|
||||
|
||||
.ui.tab.loading:before,
|
||||
.ui.tab.loading.segment:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -1.25em 0 0 -1.25em;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.ui.tab.loading:after,
|
||||
.ui.tab.loading.segment:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -1.25em 0 0 -1.25em;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
-webkit-animation: loader 0.6s infinite linear;
|
||||
animation: loader 0.6s infinite linear;
|
||||
border: 0.2em solid #767676;
|
||||
border-radius: 500rem;
|
||||
-webkit-box-shadow: 0 0 0 1px transparent;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Tab Overrides
|
||||
*******************************/
|
||||
|
||||
/*******************************
|
||||
User Overrides
|
||||
*******************************/
|
||||
/*!
|
||||
* # Fomantic-UI 2.8.8 - Transition
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
|
|
|
|||
1002
semantic/dist/semantic.js
vendored
1002
semantic/dist/semantic.js
vendored
File diff suppressed because it is too large
Load diff
2
semantic/dist/semantic.min.css
vendored
2
semantic/dist/semantic.min.css
vendored
File diff suppressed because one or more lines are too long
2
semantic/dist/semantic.min.js
vendored
2
semantic/dist/semantic.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1757,6 +1757,11 @@ each(@colors, {
|
|||
border-top: @arrowBorder;
|
||||
border-right: @arrowBorder;
|
||||
}
|
||||
@media only screen and (max-width: @largestMobileScreen) {
|
||||
.stackable .ui.vertical.pointing.menu .item::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui.pointing.menu .ui.dropdown .menu .item:after,
|
||||
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
$(function() {
|
||||
$('.menu.profile .item').tab();
|
||||
|
||||
$('.ui.calendar').calendar({
|
||||
type : 'date',
|
||||
firstDayOfWeek : 1,
|
||||
|
|
|
|||
|
|
@ -60,73 +60,309 @@ $page->navigation();
|
|||
<div class="ui container">
|
||||
<h1 class="ui header"><?= $page->title ?></h1>
|
||||
|
||||
<div class="ui segment">
|
||||
<form class="ui form" method="POST">
|
||||
<input type="hidden" name="user-id" value="<?= $user->id ?>" />
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Email') ?></label>
|
||||
|
||||
<input type="email" name="user-email" value="<?= $user->email ?>" />
|
||||
</div>
|
||||
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<label><?= __('Password') ?></label>
|
||||
|
||||
<input type="password" name="user-password" autocomplete="new-password" />
|
||||
<div class="ui stackable grid">
|
||||
<div class="four wide column">
|
||||
<div class="ui vertical pointing fluid menu profile">
|
||||
<div class="item" data-tab="personal">
|
||||
<h4 class="ui header">Personal</h4>
|
||||
<p>Information regarding yourself</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Password (repeat)') ?></label>
|
||||
|
||||
<input type="password" name="user-password-repeat" autocomplete="new-password" />
|
||||
<div class="item" data-tab="password">
|
||||
<h4 class="ui header">Password</h4>
|
||||
<p>Change your password</p>
|
||||
</div>
|
||||
<div class="item" data-tab="language">
|
||||
<h4 class="ui header">Language</h4>
|
||||
<p>Your language preferences</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<label><?= __('Birthdate') ?></label>
|
||||
<div class="twelve wide stretched column">
|
||||
<div class="ui tab" data-tab="personal">
|
||||
<div class="ui segment">
|
||||
|
||||
<div class="ui calendar">
|
||||
<div class="ui input left icon">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text"
|
||||
name="user-birthdate"
|
||||
placeholder="<?= __('Pick a date') ?>"
|
||||
value="<?= $user->birthdate ?>"
|
||||
/>
|
||||
<form class="ui form" method="POST">
|
||||
<input type="hidden" name="user-id" value="<?= $user->id ?>" />
|
||||
|
||||
<div class="three fields">
|
||||
<div class="field">
|
||||
<label><?= __('First name') ?></label>
|
||||
|
||||
<input type="text" name="user-name-first" value="" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Last name') ?></label>
|
||||
|
||||
<input type="text" name="user-name-last" value="" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Nickname') ?></label>
|
||||
|
||||
<input type="text" name="user-name-nick" value="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Language') ?></label>
|
||||
<div class="field">
|
||||
<label><?= __('Email') ?></label>
|
||||
|
||||
<select class="ui search dropdown" name="user-locale">
|
||||
<?php if (!in_array('en', $locales)) { ?>
|
||||
<option value="<?= 'en' ?>"><?= \Locale::getDisplayName('en', $user->locale) ?></option>
|
||||
<?php } ?>
|
||||
<input type="email" name="user-email" value="<?= $user->email ?>" />
|
||||
</div>
|
||||
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<label><?= __('Password') ?></label>
|
||||
|
||||
<input type="password" name="user-password" autocomplete="new-password" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Password (repeat)') ?></label>
|
||||
|
||||
<input type="password" name="user-password-repeat" autocomplete="new-password" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<label><?= __('Birthdate') ?></label>
|
||||
|
||||
<div class="ui calendar">
|
||||
<div class="ui input left icon">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text"
|
||||
name="user-birthdate"
|
||||
placeholder="<?= __('Pick a date') ?>"
|
||||
value="<?= $user->birthdate ?>"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Language') ?></label>
|
||||
|
||||
<select class="ui search dropdown" name="user-locale">
|
||||
<?php if (!in_array('en', $locales)) { ?>
|
||||
<option value="<?= 'en' ?>"><?= \Locale::getDisplayName('en', $user->locale) ?></option>
|
||||
<?php } ?>
|
||||
|
||||
<?php foreach ($locales as $locale) { ?>
|
||||
<?php if ($locale === $user->locale) { ?>
|
||||
<option value="<?= $locale ?>" selected><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
|
||||
<?php } else { ?>
|
||||
<option value="<?= $locale ?>"><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui error message"></div>
|
||||
|
||||
<input class="ui primary button"
|
||||
type="submit"
|
||||
value="<?= __('Save') ?>"
|
||||
title="<?= __('Save') ?>"
|
||||
/>
|
||||
</form>
|
||||
|
||||
<?php foreach ($locales as $locale) { ?>
|
||||
<?php if ($locale === $user->locale) { ?>
|
||||
<option value="<?= $locale ?>" selected><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
|
||||
<?php } else { ?>
|
||||
<option value="<?= $locale ?>"><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui error message"></div>
|
||||
<div class="ui tab" data-tab="password">
|
||||
<div class="ui segment">
|
||||
|
||||
<input class="ui primary button"
|
||||
type="submit"
|
||||
value="<?= __('Save') ?>"
|
||||
title="<?= __('Save') ?>"
|
||||
/>
|
||||
</form>
|
||||
<form class="ui form" method="POST">
|
||||
<input type="hidden" name="user-id" value="<?= $user->id ?>" />
|
||||
|
||||
<div class="three fields">
|
||||
<div class="field">
|
||||
<label><?= __('First name') ?></label>
|
||||
|
||||
<input type="text" name="user-name-first" value="" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Last name') ?></label>
|
||||
|
||||
<input type="text" name="user-name-last" value="" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Nickname') ?></label>
|
||||
|
||||
<input type="text" name="user-name-nick" value="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Email') ?></label>
|
||||
|
||||
<input type="email" name="user-email" value="<?= $user->email ?>" />
|
||||
</div>
|
||||
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<label><?= __('Password') ?></label>
|
||||
|
||||
<input type="password" name="user-password" autocomplete="new-password" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Password (repeat)') ?></label>
|
||||
|
||||
<input type="password" name="user-password-repeat" autocomplete="new-password" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<label><?= __('Birthdate') ?></label>
|
||||
|
||||
<div class="ui calendar">
|
||||
<div class="ui input left icon">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text"
|
||||
name="user-birthdate"
|
||||
placeholder="<?= __('Pick a date') ?>"
|
||||
value="<?= $user->birthdate ?>"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Language') ?></label>
|
||||
|
||||
<select class="ui search dropdown" name="user-locale">
|
||||
<?php if (!in_array('en', $locales)) { ?>
|
||||
<option value="<?= 'en' ?>"><?= \Locale::getDisplayName('en', $user->locale) ?></option>
|
||||
<?php } ?>
|
||||
|
||||
<?php foreach ($locales as $locale) { ?>
|
||||
<?php if ($locale === $user->locale) { ?>
|
||||
<option value="<?= $locale ?>" selected><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
|
||||
<?php } else { ?>
|
||||
<option value="<?= $locale ?>"><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui error message"></div>
|
||||
|
||||
<input class="ui primary button"
|
||||
type="submit"
|
||||
value="<?= __('Save') ?>"
|
||||
title="<?= __('Save') ?>"
|
||||
/>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui tab" data-tab="password">
|
||||
<div class="ui segment">
|
||||
|
||||
<form class="ui form" method="POST">
|
||||
<input type="hidden" name="user-id" value="<?= $user->id ?>" />
|
||||
|
||||
<div class="three fields">
|
||||
<div class="field">
|
||||
<label><?= __('First name') ?></label>
|
||||
|
||||
<input type="text" name="user-name-first" value="" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Last name') ?></label>
|
||||
|
||||
<input type="text" name="user-name-last" value="" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Nickname') ?></label>
|
||||
|
||||
<input type="text" name="user-name-nick" value="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Email') ?></label>
|
||||
|
||||
<input type="email" name="user-email" value="<?= $user->email ?>" />
|
||||
</div>
|
||||
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<label><?= __('Password') ?></label>
|
||||
|
||||
<input type="password" name="user-password" autocomplete="new-password" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Password (repeat)') ?></label>
|
||||
|
||||
<input type="password" name="user-password-repeat" autocomplete="new-password" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<label><?= __('Birthdate') ?></label>
|
||||
|
||||
<div class="ui calendar">
|
||||
<div class="ui input left icon">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text"
|
||||
name="user-birthdate"
|
||||
placeholder="<?= __('Pick a date') ?>"
|
||||
value="<?= $user->birthdate ?>"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Language') ?></label>
|
||||
|
||||
<select class="ui search dropdown" name="user-locale">
|
||||
<?php if (!in_array('en', $locales)) { ?>
|
||||
<option value="<?= 'en' ?>"><?= \Locale::getDisplayName('en', $user->locale) ?></option>
|
||||
<?php } ?>
|
||||
|
||||
<?php foreach ($locales as $locale) { ?>
|
||||
<?php if ($locale === $user->locale) { ?>
|
||||
<option value="<?= $locale ?>" selected><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
|
||||
<?php } else { ?>
|
||||
<option value="<?= $locale ?>"><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui error message"></div>
|
||||
|
||||
<input class="ui primary button"
|
||||
type="submit"
|
||||
value="<?= __('Save') ?>"
|
||||
title="<?= __('Save') ?>"
|
||||
/>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui segment">
|
||||
asdf
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue