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",
|
"popup",
|
||||||
"message",
|
"message",
|
||||||
"list",
|
"list",
|
||||||
|
"tab",
|
||||||
|
|
||||||
"api",
|
"api",
|
||||||
"transition"
|
"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-top: 1px solid #D4D4D5;
|
||||||
border-right: 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.pointing.menu .ui.dropdown .menu .item:after,
|
||||||
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
||||||
display: none;
|
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;
|
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.pointing.menu .ui.dropdown .menu .item:after,
|
||||||
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -40404,6 +40410,90 @@ Floated Menu / Item
|
||||||
/*******************************
|
/*******************************
|
||||||
Site Overrides
|
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
|
* # Fomantic-UI 2.8.8 - Transition
|
||||||
* http://github.com/fomantic/Fomantic-UI/
|
* 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-top: @arrowBorder;
|
||||||
border-right: @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.pointing.menu .ui.dropdown .menu .item:after,
|
||||||
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
$(function() {
|
$(function() {
|
||||||
|
$('.menu.profile .item').tab();
|
||||||
|
|
||||||
$('.ui.calendar').calendar({
|
$('.ui.calendar').calendar({
|
||||||
type : 'date',
|
type : 'date',
|
||||||
firstDayOfWeek : 1,
|
firstDayOfWeek : 1,
|
||||||
|
|
|
||||||
|
|
@ -60,10 +60,51 @@ $page->navigation();
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<h1 class="ui header"><?= $page->title ?></h1>
|
<h1 class="ui header"><?= $page->title ?></h1>
|
||||||
|
|
||||||
|
<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="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="twelve wide stretched column">
|
||||||
|
<div class="ui tab" data-tab="personal">
|
||||||
<div class="ui segment">
|
<div class="ui segment">
|
||||||
|
|
||||||
<form class="ui form" method="POST">
|
<form class="ui form" method="POST">
|
||||||
<input type="hidden" name="user-id" value="<?= $user->id ?>" />
|
<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">
|
<div class="field">
|
||||||
<label><?= __('Email') ?></label>
|
<label><?= __('Email') ?></label>
|
||||||
|
|
||||||
|
|
@ -127,6 +168,201 @@ $page->navigation();
|
||||||
title="<?= __('Save') ?>"
|
title="<?= __('Save') ?>"
|
||||||
/>
|
/>
|
||||||
</form>
|
</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 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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue