mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
fix(demo): improve grid, typography and tabs layouts
This commit is contained in:
KostyaDanovsky
parent
e40353ebae
commit
a0e7abcf0a
11 changed files with 108 additions and 67 deletions
|
|
@ -2,20 +2,19 @@
|
|||
// any global, non-component styles go here
|
||||
}
|
||||
|
||||
// TODO: probably it makes sense to move it to mixin
|
||||
.nga-theme-cosmic {
|
||||
// Styles for cards without separator
|
||||
nga-card nga-card-header + nga-card-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
nga-card nga-card-body + nga-card-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Styles for modals without separator
|
||||
.modal-content .modal-header + .modal-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.modal-content .modal-body + .modal-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/deep/ ul {
|
||||
border-bottom: 1px solid nga-theme(separator);
|
||||
}
|
||||
}
|
||||
|
||||
nga-tab {
|
||||
|
|
@ -22,6 +18,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: nga-theme(color-fg);
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid nga-theme(separator);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
/deep/ ul {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
nga-tab.content-active {
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@
|
|||
|
||||
@include nga-install-component() {
|
||||
|
||||
nga-card {
|
||||
nga-card-body {
|
||||
height: 100%;
|
||||
padding: 2rem;
|
||||
background-image: nga-theme(radial-gradient);
|
||||
}
|
||||
nga-card-body {
|
||||
height: 100%;
|
||||
padding: 2rem;
|
||||
background-image: nga-theme(radial-gradient);
|
||||
color: nga-theme(color-fg);
|
||||
}
|
||||
|
||||
.location {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<div class="col-md-12">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Inline Form
|
||||
Grid System
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<h4 class="grid-h">Stacked to horizontal</h4>
|
||||
<h5 class="grid-h">Stacked to horizontal</h5>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Mobile and desktop</h4>
|
||||
<h5 class="grid-h">Mobile and desktop</h5>
|
||||
<div class="row show-grid">
|
||||
<div class="col-12 col-md-8">
|
||||
<div>.col-12 .col-md-8</div>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Mobile, tablet, desktop</h4>
|
||||
<h5 class="grid-h">Mobile, tablet, desktop</h5>
|
||||
<div class="row show-grid">
|
||||
<div class="col-12 col-sm-6 col-md-8">
|
||||
<div>.col-12 .col-sm-6 .col-md-8</div>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Column wrapping</h4>
|
||||
<h5 class="grid-h">Column wrapping</h5>
|
||||
<div class="row show-grid">
|
||||
<div class="col-9">
|
||||
<div>.col-9</div>
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Responsive column resets</h4>
|
||||
<h5 class="grid-h">Responsive column resets</h5>
|
||||
<div class="row show-grid">
|
||||
<div class="col-6 col-sm-3">
|
||||
<div>.col-6 .col-sm-3
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Offsetting columns</h4>
|
||||
<h5 class="grid-h">Offsetting columns</h5>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Grid options</h4>
|
||||
<h5 class="grid-h">Grid options</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,31 @@
|
|||
:host {
|
||||
.show-grid {
|
||||
.row {
|
||||
margin: -0.5rem;
|
||||
}
|
||||
|
||||
div[class^=col-] {
|
||||
padding: 10px;
|
||||
padding: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
background-color: rgba(white, 0.3);
|
||||
padding: 12px 5px;
|
||||
background-color: #494299;
|
||||
padding: 0.75rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-h {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,40 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card size="medium">
|
||||
<nga-card-header>Tabset</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-tabset>
|
||||
<nga-tab tabTitle="Tab #1">
|
||||
<span>Content #1</span>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Tab #2">
|
||||
<span>Content #2</span>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Tab #3">
|
||||
<span>Content #3</span>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nga-card-body>
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nga-card size="small">
|
||||
<nga-tabset>
|
||||
<nga-tab tabTitle="Simple Tab #1">
|
||||
<p>In 1975, the first general purpose home automation network technology, <a href="/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, was developed. It is a communication protocol for electronic devices. It primarily uses <a href="/wiki/Electric_power_transmission" title="Electric power transmission">electric power transmission</a> wiring for signalling and control, where the signals involve brief <a href="/wiki/Radio_frequency" title="Radio frequency">radio frequency</a> bursts of <a href="/wiki/Digital_data" title="Digital data">digital data</a>, and remains the most widely available.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8">[8]</a></sup> By 1978, X10 products included a 16 channel command console, a lamp module, and an appliance module. Soon after came the wall switch module and the first X10 timer.</p>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Simple Tab #2">
|
||||
<span>Content #2</span>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Simple Tab #3">
|
||||
<span>Content #3</span>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<nga-card size="medium">
|
||||
<nga-card-header>Route Tabset</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nga-route-tabset [tabs]="tabs"></nga-route-tabset>
|
||||
</nga-card-body>
|
||||
<nga-card size="small">
|
||||
<nga-tabset fullWidth>
|
||||
<nga-tab tabTitle="Full width tab #1">
|
||||
<p><b>Home automation</b> or <b>smart home</b><sup id="cite_ref-Smart_Home_1-0" class="reference"><a href="#cite_note-Smart_Home-1">[1]</a></sup> (also known as <b>domotics</b><sup id="cite_ref-t3_2-0" class="reference"><a href="#cite_note-t3-2">[2]</a></sup>) is <a href="/wiki/Building_automation" title="Building automation">building automation</a> for the home. It involves the control and automation of lighting, heating (such as <a href="/wiki/Smart_thermostat" title="Smart thermostat">smart thermostats</a>), ventilation, air conditioning (<a href="/wiki/HVAC" title="HVAC">HVAC</a>), and security, as well as <a href="/wiki/Home_appliance" title="Home appliance">home appliances</a> such as washer/dryers, ovens or refrigerators/freezers. <a href="/wiki/Wi-Fi" title="Wi-Fi">Wi-Fi</a> is often used for remote monitoring and control. Home devices, when remotely monitored and controlled via the Internet, are an important constituent of the <a href="/wiki/Internet_of_Things" class="mw-redirect" title="Internet of Things">Internet of Things</a>. Modern systems generally consist of switches and sensors connected to a central hub sometimes called a "gateway" from which the system is controlled with a <a href="/wiki/User_interface" title="User interface">user interface</a> that is interacted either with a wall-mounted terminal, mobile phone software, <a href="/wiki/Tablet_computer" title="Tablet computer">tablet computer</a> or a web interface, often but not always via Internet cloud services.</p>
|
||||
<p>While there are many competing vendors, there are very few worldwide accepted industry standards and the smart home space is heavily fragmented.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3">[3]</a></sup> Popular <a href="/wiki/Communications_protocol" title="Communications protocol">communications protocol</a> for products include <a href="/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, <a href="/wiki/Ethernet" title="Ethernet">Ethernet</a>, <a href="/wiki/RS-485" title="RS-485">RS-485</a>, <a href="/wiki/6LoWPAN" title="6LoWPAN">6LoWPAN</a>, <a href="/wiki/Bluetooth_low_energy" class="mw-redirect" title="Bluetooth low energy">Bluetooth LE (BLE)</a>, <a href="/wiki/ZigBee" class="mw-redirect" title="ZigBee">ZigBee</a> and <a href="/wiki/Z-Wave" title="Z-Wave">Z-Wave</a>, or other proprietary protocols all of which are incompatible with each other.<sup id="cite_ref-crhomephone_4-0" class="reference"><a href="#cite_note-crhomephone-4">[4]</a></sup> Manufacturers often prevent independent implementations by withholding documentation and by litigation.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5">[5]</a></sup></p>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Full width tab #2">
|
||||
<span>Content #2</span>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Full width tab #3">
|
||||
<span>Content #3</span>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<nga-card size="small">
|
||||
<nga-route-tabset [tabs]="tabs"></nga-route-tabset>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
nga-tabset {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nga-tab {
|
||||
padding: nga-theme(padding);
|
||||
}
|
||||
|
||||
/deep/ ngx-tab1, /deep/ ngx-tab2 {
|
||||
display: block;
|
||||
padding: nga-theme(padding);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,12 @@ import { Component } from '@angular/core';
|
|||
@Component({
|
||||
selector: 'ngx-tab1',
|
||||
template: `
|
||||
<p>Tab 1 works!</p>
|
||||
<p>Early home automation began with labor-saving machines. Self-contained electric or gas powered
|
||||
<a href="/wiki/Home_appliances">home appliances</a> became viable in the 1900s with the introduction of
|
||||
<a href="/wiki/Electric_power_distribution">electric power distribution</a>
|
||||
and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines,
|
||||
dishwashers, and clothes dryers.
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
export class Tab1Component { }
|
||||
|
|
@ -25,11 +30,11 @@ export class TabsComponent {
|
|||
|
||||
tabs: any[] = [
|
||||
{
|
||||
title: 'Tab #1',
|
||||
title: 'Route tab #1',
|
||||
route: '/pages/ui-features/tabs/tab1',
|
||||
},
|
||||
{
|
||||
title: 'Tab #2',
|
||||
title: 'Route tab #2',
|
||||
route: '/pages/ui-features/tabs/tab2',
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@
|
|||
<div class="name bold">Open Sans</div>
|
||||
|
||||
<div class="variants">
|
||||
<span class="bold">Bold</span>
|
||||
<span class="regular">Regular</span>
|
||||
<span class="light">Light</span>
|
||||
<span class="font-w-bold">Bold</span>
|
||||
<span class="font-w-regular">Regular</span>
|
||||
<span class="font-w-light">Light</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
|
|
@ -41,7 +41,6 @@
|
|||
</p>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
|
|
@ -105,7 +104,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
||||
|
|
@ -133,7 +131,6 @@
|
|||
the far <strong>World of Grammar</strong>.
|
||||
</p>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
|
|
@ -154,7 +151,6 @@
|
|||
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
||||
</blockquote>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -224,7 +220,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -258,7 +253,6 @@
|
|||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
|
|
@ -283,7 +277,6 @@
|
|||
Vokalia and <a href="http://google.com" target="_blank">Consonantia, there live the blind texts.</a>
|
||||
</p>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -312,7 +305,6 @@
|
|||
<li>A small river named Duden flows</li>
|
||||
</ul>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,29 @@
|
|||
|
||||
@include nga-install-component() {
|
||||
|
||||
.font-secondary .header .name {
|
||||
.font-secondary .font-header .name {
|
||||
font-size: 4.5rem;
|
||||
line-height: 4rem;
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.font-main .header .name {
|
||||
font-size: 2.5rem;
|
||||
.font-main .font-header .name {
|
||||
font-size: 3rem;
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.font-row {
|
||||
margin-bottom: 3rem;
|
||||
.header {
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
padding-bottom: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
border-bottom: 1px solid rgba(nga-theme(color-fg), 0.1);
|
||||
color: nga-theme(color-fg-heading);
|
||||
|
||||
|
|
@ -30,7 +37,7 @@
|
|||
line-height: 1;
|
||||
align-items: flex-end;
|
||||
|
||||
h1 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue