Added changelog and changelog style to the typography

Small tweaks on helper classes and typography pages
(Fuse Highlight) Don't wrap the code and show scrollbars instead
This commit is contained in:
Sercan Yemen 2018-06-12 17:06:38 +03:00
parent 0b5727ff15
commit ddcf1d5483
15 changed files with 1153 additions and 26 deletions

View File

@ -3,4 +3,5 @@
padding: 8px;
background: #263238;
cursor: text;
overflow: auto;
}

View File

@ -275,3 +275,88 @@ strong {
.text-nowrap {
white-space: nowrap;
}
// Changelog
.changelog {
.entry {
background: white;
margin-bottom: 24px;
padding: 24px 32px;
@include mat-elevation(2);
> .title {
display: flex;
align-items: center;
margin-bottom: 24px;
.version {
font-size: 24px;
}
.date {
margin-left: 8px;
font-size: 17px;
opacity: 0.54;
}
}
.groups {
div {
margin-bottom: 32px;
&:last-child {
margin-bottom: 0;
}
}
.title {
display: inline-flex;
font-size: 13px;
color: white;
letter-spacing: 0.015em;
line-height: 1;
padding: 5px 8px;
border-radius: 2px;
}
.breaking-changes {
.title {
background: #F44336;
}
}
.new {
.title {
background: #43A047;
}
}
.improved {
.title {
background: #673AB7;
}
}
.fixed {
.title {
background: #2196F3;
}
}
ul {
padding-left: 24px;
li {
margin-bottom: 6px;
letter-spacing: 0.015em;
}
}
}
}
}

View File

@ -104,9 +104,9 @@ $code-color-attr-name: #B65611 !default;
// whitespace management
white-space: pre; // fallback
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
//white-space: pre-wrap;
//word-break: break-all;
//word-wrap: break-word;
font-family: $code-font-family;
font-size: $code-font-size;

View File

@ -0,0 +1,881 @@
<div id="changelog" class="page-layout simple fullwidth">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-16">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
</div>
<div class="h2 mt-16">Changelog</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<div class="changelog">
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v6.0.1 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v6.0.1</span>
<span class="date">(2018-05-10)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated ngRx to 6.0.0-beta.1</li>
<li>Updated various other libraries to Angular 6 compatible versions</li>
<li>Updated demo code to make it compatible with RxJS 6.0.0</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Fixed: Scrumboard "Add a list" button is draggable and causing an error</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v6.0.0 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v6.0.0</span>
<span class="date">(2018-05-06)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 6.0.0</li>
<li>Updated Angular Material to 6.0.0</li>
<li>Updated Angular CLI to 6.0.0</li>
<li>Updated various other packages</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Fixed: Material icon button colors are being overwritten by Fuse</li>
<li>Fixed: Contacts app edit dialog issues</li>
<li>Fixed: Navigation sidebar doesn't scroll on mobile devices</li>
<li>Fixed: Horizontal navigation doesn't have 'hidden' and 'custom function' features like
the vertical
navigation
</li>
<li>Fixed: Search bar close icon alignment</li>
<li>Fixed: Profile page header background image doesn't cover the header</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v5.2.10 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v5.2.10</span>
<span class="date">(2018-03-10)</span>
</div>
<div class="groups">
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Fixed: Sidebar folded bugs</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v5.2.9 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v5.2.9</span>
<span class="date">(2018-03-10)</span>
</div>
<div class="groups">
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Fixed: Sidebar folded doesn't work correctly if activated programmatically</li>
<li>Fixed: Skeleton AoT building issues</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v5.2.8 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v5.2.8</span>
<span class="date">(2018-03-08)</span>
</div>
<div class="groups">
<div class="breaking-changes">
<span class="title">Breaking changes</span>
<ul>
<li>
<code>core</code> folder moved into the <code>@fuse</code> allowing project owners to
have their own core folder inside the app directory. Also allows for better separation
in between your app and core Fuse features.
</li>
<li>
Removed Angular Material module that includes all Material components at once and added
imports for all modules separately. From now on, you must include the Material
components that you have used in your components manually in that component's module
file. This was a required changed as it does increase the development performance as
well as decrease the building and the AoT building times.
</li>
<li>
Changed how navigation model works. Now it's just a simple const that being exported
from the <code>navigation.ts</code> file. It allows for easier swapping and editing of
the navigation.
</li>
<li>
New sidebar component. Allows us to move main navigation sidebar logic out of your way.
Check out the Demo app to see the full usage.
</li>
</ul>
</div>
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.2.8</li>
<li>Updated Angular Material to 5.2.4</li>
<li>Updated Angular CLI to 1.7.3</li>
<li>Matched the Fuse version number with the Angular</li>
<li>No more Fuse2, the package name update to Fuse since the version number matched to
Angular's.
</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Fixed various issues with Fuse Angular Material Color Picker component.</li>
<li>Fixed various other small layout and logic bugs.</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.3.6 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.3.6</span>
<span class="date">(2018-02-06)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.2.3</li>
<li>Updated Angular Material to 5.1.1</li>
<li>Updated Angular CLI to 1.6.7</li>
<li>New Analytics dashboard design</li>
<li>Added Chart.js examples through the new dashboard</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.3.5 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.3.5</span>
<span class="date">(2018-01-24)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated ngRx to 5.0.0</li>
<li>Updated Angular CLI to 1.6.5 to fix the wrong devkit version issue</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.3.4 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.3.4</span>
<span class="date">(2018-01-18)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.2.1</li>
<li>Updated Angular Material to 5.1.0</li>
<li>Updated various other packages to latest versions</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Quick Panel is too wide for smaller screens</li>
<li>Academy App course step doesn't scroll on mobile</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.3.3 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.3.3</span>
<span class="date">(2018-01-11)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.2.0</li>
<li>Updated Angular Material to 5.0.4</li>
<li>Updated various other packages to latest versions</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.3.2 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.3.2</span>
<span class="date">(2018-01-09)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.1.3</li>
<li>Updated Angular Material to 5.0.3</li>
<li>Updated various other packages to latest versions</li>
<li>Added new card designs</li>
<li>Added new fuse-highlight component</li>
<li>Added lazy load to various other demo modules to make the demo project faster</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>BREAKING CHANGE: Cards are moved to custom classes</li>
<li>BREAKING CHANGE: Removed fuse-hljs (Use fuse-highlight instead)</li>
<li>Various other small fixed and enhancements</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.3.1 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.3.1</span>
<span class="date">(2018-01-02)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.1.2</li>
<li>Updated Angular Material to 5.0.2</li>
<li>Updated various other packages to latest versions</li>
<li>New Academy app</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Mail compose dialog responsive issues</li>
<li>Fixed for various other bugs</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.3.0 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.3.0</span>
<span class="date">(2017-12-15)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.1.0</li>
<li>Updated Angular Material to 5.0.1</li>
<li>Updated various other packages to latest versions</li>
<li>New NgRx Sample app (Mail-NgRx app)</li>
<li>Form stepper examples</li>
<li>Added support for translations in navigation items</li>
<li>Moved the navigation.model.ts into its own folder</li>
<li>Added badge support for collapsable navigation items</li>
<li>Initialize the navigation from app.component rather then navigation.service</li>
<li>Trigger expand/collapse of the navigation on ngOnInit to update the active item</li>
<li>Replaced Calendar images</li>
<li>Added custom validator for password matching in Auth forms</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Custom scrollbars are showing in print</li>
<li>Various small issues in Auth pages</li>
<li>ngx-color-picker various style issues</li>
<li>Make sure the nav item has children before trying to get them</li>
<li>Renamed the KnowledgeBase demo module</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.2.3 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.2.3</span>
<span class="date">(2017-11-28)</span>
</div>
<div class="groups">
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Sidenav helper causes issues in mobile media steps</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.2.2 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.2.2</span>
<span class="date">(2017-11-27)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.0.3</li>
<li>Updated Angular Material to 5.0.0-rc.1</li>
<li>Updated Flex Layout</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Contacts app various issues</li>
<li>Duplicate content in Profile page tabs</li>
<li>Folded status of the Navbar shouldn't brake the layout if Horizontal Navbar is active
</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.2.1 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.2.1</span>
<span class="date">(2017-11-13)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 5.0.1</li>
<li>Updated Angular Material to 5.0.0-rc0</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Compatibility fixed for Angular Material 5.0.0-rc0</li>
<li>Scrumboard label selector not working properly</li>
<li>Todo detail style refinements</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.2.0 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.2.0</span>
<span class="date">(2017-11-06)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>BREAKING CHANGE: Updated Angular to 5.0.0 (clean installation recommended)</li>
<li>Updated Angular Flex Layout to 2.0.0-beta.10</li>
<li>E-Commerce App</li>
<li>File based translation service and its implementation example</li>
<li>Added Material Design cards</li>
<li>New 'Knowledge Base' page design</li>
<li>Added Tabbed versions of the Carded Sidenav layouts</li>
<li>Added an ability to control the folded status of the vertical navigation via
FuseConfig
</li>
<li>
Added 'exactMatch' property to the Navigation Model for more control over the active
item
highlighting
</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Angular 5 Compatibility fixed</li>
<li>Various iOS10 scrolling issues</li>
<li>FAQ page header shrinks on small heights</li>
<li>Stagger animation doesn't have 'optional' parameter</li>
<li>Toolbar navigation toggle button doesn't actually toggle the navigation bar</li>
<li>Nav items cannot be put on the root in Horizontal menu</li>
<li>Vertical navbar puts out wrong classes when its toggled</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.1.2 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.1.2</span>
<span class="date">(2017-10-16)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>BREAKING CHANGE: Updated Angular Material to 2.0.0-beta.12</li>
<li>Updated Angular to 4.4.5</li>
<li>New Reset and Forgot password page styles</li>
<li>Added 'agm-map', Google Maps component library.</li>
<li>New pricing page design</li>
<li>New mail confirmation page</li>
<li>New FAQ page design</li>
<li>Added new methods for accessing and updating specific nav items</li>
<li>Added the ability to add custom functions to the nav items</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Print styles and page breaks</li>
<li>Inconsistent font sizes across elements</li>
<li>Toolbar search bar button collapses on close</li>
<li>iOS scrolling issues</li>
<li>All 'mat-select' elements wrapped with 'mat-form-field' and fixed related issues</li>
<li>Auth page v2 styles iOS height issues</li>
<li>Chat view is not scrollable on mobile</li>
<li>Terms & Conditions checkbox styling issues on Auth forms</li>
<li>Some page layout header heights not correct on small devices</li>
<li>Lock page layout issues</li>
<li>Calendar & Scrumboard datepicker issues</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.1.1 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.1.1</span>
<span class="date">(2017-09-28)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular Material to 2.0.0-beta.11</li>
<li>Nested grouping in navigation</li>
<li>Added Angular Material elements showcase</li>
</ul>
</div>
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>Replaced Http module with HttpClient</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.1.0 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.1.0</span>
<span class="date">(2017-09-22)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Updated Angular to 4.4.3</li>
<li>Added HMR config for starting the ng serve with HMR support</li>
<li>Added a way to swap navigation models on the fly</li>
<li>Enhanced animations for all apps and some pages</li>
<li>Custom perfect scrollbar directive</li>
<li>Navigation bar backdrop for closing the navigation easily on mobile</li>
</ul>
</div>
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>BREAKING CHANGE: Completely re-structured the navigation model</li>
<li>Locked dev dependency versions to prevent majority of the npm update errors</li>
<li>Updated perfect scrollbar</li>
<li>Calendar, Mail, ToDo and Chat app visual and structural Improved</li>
<li>Disabled the perfect-scrollbar on mobile completely</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.0.5 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.0.5</span>
<span class="date">(2017-09-12)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Horizontal Navigation</li>
<li>Boxed Layout</li>
<li>New fade-in-out animation to Animations service</li>
</ul>
</div>
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>Scrumboard & Chat style Improved</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Removed unused md2 library from skeleton</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.0.4 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.0.4</span>
<span class="date">(2017-08-31)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Scrumboard App</li>
</ul>
</div>
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>Responsive Improved, many more will come</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Dashboard sidenav not correctly working on some mobile devices</li>
<li>Couple MS Edge issues</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.0.3 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.0.3</span>
<span class="date">(2017-08-30)</span>
</div>
<div class="groups">
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Reverted to Angular 4.3.5 since animations are not correctly working on 4.3.6</li>
<li>Firefox and Edge scroll issues</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.0.2 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.0.2</span>
<span class="date">(2017-08-30)</span>
</div>
<div class="groups">
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>Angular Material v2.0.0-beta.10 Compatibility</li>
<li>Upgraded to Angular 4.3.6</li>
<li>Shortcuts component now stores the shortcuts in cookies</li>
<li>Added print styles</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.0.1 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.0.1</span>
<span class="date">(2017-08-24)</span>
</div>
<div class="groups">
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>New router animations</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>Fixed AoT compiler issues</li>
</ul>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- @ v1.0.0 -->
<!-- --------------------------------------------------------------------------------------------- -->
<div class="entry">
<div class="title">
<span class="version">v1.0.0</span>
<span class="date">(2017-08-23)</span>
</div>
<div class="groups">
<div class="new">
<span class="title">New</span>
<ul>
<li>Initial Release</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- / CONTENT -->
</div>

View File

@ -0,0 +1,6 @@
@import "src/@fuse/scss/fuse";
:host {
}

View File

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector : 'docs-changelog',
templateUrl: './changelog.component.html',
styleUrls : ['./changelog.component.scss']
})
export class DocsChangelogComponent
{
constructor()
{
}
}

View File

@ -1,8 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatIconModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module';
import { DocsChangelogComponent } from 'app/main/documentation/changelog/changelog.component';
const routes: Routes = [
{
path : 'changelog',
component: DocsChangelogComponent
},
{
path : 'components',
loadChildren: './components/components.module#ComponentsModule'
@ -18,8 +27,15 @@ const routes: Routes = [
];
@NgModule({
imports: [
RouterModule.forChild(routes)
declarations: [
DocsChangelogComponent
],
imports : [
RouterModule.forChild(routes),
MatIconModule,
FuseSharedModule
]
})
export class DocumentationModule

View File

@ -53,7 +53,7 @@
</div>
<div class="mat-title mt-20">Direction Specific Padding Helpers</div>
<div class="mat-title mt-64">Direction Specific Padding Helpers</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
@ -111,7 +111,7 @@
</div>
<div class="mat-title mt-20">Margin Helpers</div>
<div class="mat-title mt-64">Margin Helpers</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
@ -164,7 +164,7 @@
</div>
<div class="mat-title mt-20">Direction Specific Margin Helpers</div>
<div class="mat-title mt-64">Direction Specific Margin Helpers</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">

View File

@ -69,7 +69,7 @@
</div>
<div class="mat-title mt-20">Height Helpers</div>
<div class="mat-title mt-64">Height Helpers</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">

View File

@ -2,7 +2,7 @@
<div class="mat-title">Blockquotes</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div class="mat-white-bg mat-elevation-z2 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
@ -87,9 +87,9 @@
</div>
<div class="mat-title mt-20">Lists</div>
<div class="mat-title mt-64">Lists</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div class="mat-white-bg mat-elevation-z2 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
@ -167,9 +167,9 @@
</div>
<div class="mat-title mt-20">Definition Lists</div>
<div class="mat-title mt-64">Definition Lists</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div class="mat-white-bg mat-elevation-z2 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
@ -200,4 +200,128 @@
</div>
<div class="mat-title mt-64">Change log</div>
<div class="mat-white-bg mat-elevation-z2 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="changelog">
<div class="entry">
<div class="title">
<span class="version">v1.0.0</span>
<span class="date">(2018-05-08)</span>
</div>
<div class="groups">
<div class="breaking-changes">
<span class="title">Breaking changes</span>
<ul>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
</ul>
</div>
<div class="new">
<span class="title">New</span>
<ul>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
</ul>
</div>
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<fuse-highlight lang="html" class="source-code" fxFlex="50">
<textarea #source hidden="hidden">
<div class="changelog">
<div class="entry">
<div class="title">
<span class="version">v1.0.0</span>
<span class="date">(2018-05-08)</span>
</div>
<div class="groups">
<div class="breaking-changes">
<span class="title">Breaking changes</span>
<ul>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
</ul>
</div>
<div class="new">
<span class="title">New</span>
<ul>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
</ul>
</div>
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
</ul>
</div>
<div class="fixed">
<span class="title">Fixed</span>
<ul>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
<li>This is an example list item for the change log</li>
</ul>
</div>
</div>
</div>
</div>
</textarea>
</fuse-highlight>
</div>
</div>
</div>

View File

@ -6,6 +6,7 @@
position: relative;
margin-bottom: 24px;
min-height: 180px;
max-height: 500px;
code {
background: none !important;

View File

@ -2,7 +2,7 @@
<div class="mat-title">Material design typography classes</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div class="mat-white-bg mat-elevation-z2 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
@ -181,9 +181,9 @@
</div>
<div class="mat-title mt-20">Standard Headings</div>
<div class="mat-title mt-64">Standard Headings</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div class="mat-white-bg mat-elevation-z2 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">

View File

@ -26,7 +26,7 @@
</div>
<div class="mat-title mt-20">Font Size</div>
<div class="mat-title mt-64">Font Size</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
@ -48,7 +48,7 @@
</div>
<div class="mat-title mt-20">Line Height</div>
<div class="mat-title mt-64">Line Height</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
@ -74,7 +74,7 @@
</div>
<div class="mat-title mt-20">Other helpers</div>
<div class="mat-title mt-64">Other helpers</div>
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">

View File

@ -1,6 +1,6 @@
<div id="typography-inline-text-elements" class="p-24">
<div class="mat-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div class="mat-white-bg mat-elevation-z2 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">

View File

@ -894,7 +894,7 @@ export const navigation: FuseNavigation[] = [
},
{
id : 'directory-structure',
title: 'Directory structure',
title: 'Directory Structure',
type : 'item',
url : '/documentation/working-with-fuse/directory-structure'
},
@ -905,10 +905,10 @@ export const navigation: FuseNavigation[] = [
url : '/documentation/working-with-fuse/directory-structure'
},
{
id : 'template-layouts',
title: 'Template Layouts',
id : 'theme-layouts',
title: 'Theme Layouts',
type : 'item',
url : '/documentation/working-with-fuse/template-layouts'
url : '/documentation/working-with-fuse/theme-layouts'
},
{
id : 'page-layouts',