purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed: Fullwidth simple page layout doesn't scroll

Browse Source 
+ Added: New logo to the various pages
+ Fixed: Mobile zoom is not disabled
+ Fixed: Profile timeline mobile order is not correct
+ Fixed: Quickpanel focusses to the form elements causing it to scroll on mobile devices when opened
+ Various demo page mobile fixes
This commit is contained in:
Sercan Yemen 2017-09-22 16:04:59 +03:00
parent e6ee5d017e
commit 6747610771
27 changed files with 53 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/core/scss/partials/_page-layouts.scss
View File

@ -273,6 +273,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
// Fullwidth // Fullwidth
&.fullwidth {
overflow: auto;
}
&.fullwidth, &.fullwidth,
&.inner-sidenav { &.inner-sidenav {
min-height: 100%; min-height: 100%;
@ -445,7 +449,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.simple { &.simple {
&.fullwidth { &.fullwidth {
overflow: visible;
> .content { > .content {
flex: 1 0 auto; flex: 1 0 auto;

1
src/app/main/content/apps/scrumboard/scrumboard.component.scss
View File

@ -5,6 +5,7 @@
#boards { #boards {
width: 100%; width: 100%;
overflow: auto;
.board-list { .board-list {
padding: 32px 0; padding: 32px 0;

2
src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
View File

@ -5,7 +5,7 @@
<div id="forgot-password-form"> <div id="forgot-password-form">
<div class="logo"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">RECOVER YOUR PASSWORD</div> <div class="title">RECOVER YOUR PASSWORD</div>

7
src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss
View File

@ -31,14 +31,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

4
src/app/main/content/pages/authentication/login-2/login-2.component.html
View File

@ -1,8 +1,9 @@
<div id="login" fxLayout="row" fxLayoutAlign="start"> <div id="login" fxLayout="row" fxLayoutAlign="start">
<div id="login-intro" fxFlex fxHide fxShow.gt-xs> <div id="login-intro" fxFlex fxHide fxShow.gt-xs>
<div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}"> <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}"> <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
@ -13,6 +14,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
</div> </div>
</div> </div>
<div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}"> <div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">

8
src/app/main/content/pages/authentication/login-2/login-2.component.scss
View File

@ -17,15 +17,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin-bottom: 32px; margin-bottom: 32px;
color: #FFFFFF;
border-radius: 2px;
text-align: center;
background: mat-color($accent);
} }
.title { .title {

8
src/app/main/content/pages/authentication/login/login.component.html
View File

@ -3,8 +3,9 @@
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="login-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"> <div id="login-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo md-accent-bg">
<span>F</span> <div class="logo">
<img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">LOGIN TO YOUR ACCOUNT</div> <div class="title">LOGIN TO YOUR ACCOUNT</div>
@ -62,6 +63,9 @@
<span class="text">Don't have an account?</span> <span class="text">Don't have an account?</span>
<a class="link" [routerLink]="'/pages/auth/register'">Create an account</a> <a class="link" [routerLink]="'/pages/auth/register'">Create an account</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

7
src/app/main/content/pages/authentication/login/login.component.scss
View File

@ -31,14 +31,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

4
src/app/main/content/pages/authentication/register-2/register-2.component.html
View File

@ -1,8 +1,9 @@
<div id="register" fxLayout="row" fxLayoutAlign="start"> <div id="register" fxLayout="row" fxLayoutAlign="start">
<div id="register-intro" fxFlex fxHide fxShow.gt-xs> <div id="register-intro" fxFlex fxHide fxShow.gt-xs>
<div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}"> <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}"> <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
@ -13,6 +14,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
</div> </div>
</div> </div>
<div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}"> <div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">

8
src/app/main/content/pages/authentication/register-2/register-2.component.scss
View File

@ -17,15 +17,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin-bottom: 32px; margin-bottom: 32px;
color: #FFFFFF;
border-radius: 2px;
text-align: center;
background: mat-color($accent);
} }
.title { .title {

8
src/app/main/content/pages/authentication/register/register.component.html
View File

@ -3,8 +3,9 @@
<div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="register-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"> <div id="register-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo md-accent-bg">
<span>F</span> <div class="logo">
<img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">CREATE AN ACCOUNT</div> <div class="title">CREATE AN ACCOUNT</div>
@ -60,6 +61,9 @@
<span class="text">Already have an account?</span> <span class="text">Already have an account?</span>
<a class="link" [routerLink]="'/pages/auth/login'">Login</a> <a class="link" [routerLink]="'/pages/auth/login'">Login</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

7
src/app/main/content/pages/authentication/register/register.component.scss
View File

@ -31,14 +31,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

2
src/app/main/content/pages/authentication/reset-password/reset-password.component.html
View File

@ -6,7 +6,7 @@
<div id="reset-password-form"> <div id="reset-password-form">
<div class="logo"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">RESET YOUR PASSWORD</div> <div class="title">RESET YOUR PASSWORD</div>

7
src/app/main/content/pages/authentication/reset-password/reset-password.component.scss
View File

@ -31,14 +31,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

4
src/app/main/content/pages/coming-soon/coming-soon.component.html
View File

@ -6,8 +6,8 @@
<div class="top"> <div class="top">
<div class="logo md-accent-bg"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">Hey! Thank you for checking out our app.</div> <div class="title">Hey! Thank you for checking out our app.</div>

7
src/app/main/content/pages/coming-soon/coming-soon.component.scss
View File

@ -37,14 +37,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

8
src/app/main/content/pages/invoices/compact/compact.component.html
View File

@ -30,8 +30,8 @@
</div> </div>
<div class="issuer md-accent-bg" fxLayout="row" fxLayoutAlign="start center"> <div class="issuer md-accent-bg" fxLayout="row" fxLayoutAlign="start center">
<div class="logo" fxLayout="row" fxLayoutAlign="center center"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="info"> <div class="info">
@ -124,8 +124,8 @@
<div class="footer"> <div class="footer">
<div class="note">Please pay within 15 days. Thank you for your business.</div> <div class="note">Please pay within 15 days. Thank you for your business.</div>
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="row" fxLayoutAlign="start start">
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center"> <div class="logo">
<div>F</div> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="small-note"> <div class="small-note">
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque

9
src/app/main/content/pages/invoices/compact/compact.component.scss
View File

@ -68,8 +68,7 @@
.logo { .logo {
width: 96px; width: 96px;
height: 96px; padding: 0 8px;
font-size: 72px;
border-right: 1px solid rgba(255, 255, 255, 0.7); border-right: 1px solid rgba(255, 255, 255, 0.7);
} }
@ -186,12 +185,7 @@
.logo { .logo {
width: 32px; width: 32px;
min-width: 32px; min-width: 32px;
height: 32px;
font-size: 17px;
font-weight: 500;
margin-right: 24px; margin-right: 24px;
border-radius: 2px;
overflow: hidden;
} }
.small-note { .small-note {
@ -341,7 +335,6 @@
} }
.logo { .logo {
font-size: 14pt;
margin-right: 8pt; margin-right: 8pt;
} }

9
src/app/main/content/pages/invoices/modern/modern.component.html
View File

@ -10,8 +10,9 @@
<div class="ids" fxLayout="column"> <div class="ids" fxLayout="column">
<div fxLayout="row" class="seller" fxLayoutAlign="start center"> <div fxLayout="row" class="seller" fxLayoutAlign="start center">
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center">
<div>F</div> <div class="logo">
<img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="divider"></div> <div class="divider"></div>
@ -145,8 +146,8 @@
<div class="footer"> <div class="footer">
<div class="note">Please pay within 15 days. Thank you for your business.</div> <div class="note">Please pay within 15 days. Thank you for your business.</div>
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="row" fxLayoutAlign="start start">
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center"> <div class="logo">
<div>F</div> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="small-note"> <div class="small-note">
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque

9
src/app/main/content/pages/invoices/modern/modern.component.scss
View File

@ -35,8 +35,6 @@
.logo { .logo {
width: 156px; width: 156px;
height: 156px;
font-size: 115px;
} }
} }
@ -154,12 +152,7 @@
.logo { .logo {
width: 32px; width: 32px;
min-width: 32px; min-width: 32px;
height: 32px;
font-size: 17px;
font-weight: 500;
margin-right: 24px; margin-right: 24px;
border-radius: 2px;
overflow: hidden;
} }
.small-note { .small-note {
@ -205,8 +198,6 @@
.logo { .logo {
width: 60pt; width: 60pt;
height: 60pt;
font-size: 40pt;
} }
} }

2
src/app/main/content/pages/maintenance/maintenance.component.html
View File

@ -5,7 +5,7 @@
<div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"> <div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">Closed for scheduled maintenance!</div> <div class="title">Closed for scheduled maintenance!</div>

9
src/app/main/content/pages/maintenance/maintenance.component.scss
View File

@ -18,7 +18,7 @@
#maintenance-form { #maintenance-form {
max-width: 384px; max-width: 384px;
padding: 32px; padding: 48px;
background: #FFFFFF; background: #FFFFFF;
text-align: center; text-align: center;
@include mat-elevation(7); @include mat-elevation(7);
@ -30,14 +30,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: rgba(255, 255, 255, 1);
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

6
src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
View File

@ -1,7 +1,6 @@
<div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap> <div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
<div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2" <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65"
fxFlexOrder.gt-sm="1"
*fuseIfOnDom [@animateStagger]="{value:'50'}"> *fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="profile-box add-post" <div class="profile-box add-post"
@ -135,8 +134,7 @@
</div> </div>
</div> </div>
<div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35" fxFlexOrder="1" <div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35">
fxFlexOrder.gt-sm="2">
<div class="profile-box latest-activity" fxLayout="column" <div class="profile-box latest-activity" fxLayout="column"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}"> *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">

2
src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss
View File

@ -219,7 +219,7 @@
padding-left: 32px; padding-left: 32px;
@include media-breakpoint-down('sm') { @include media-breakpoint-down('sm') {
padding: 0; padding: 32px 0 0 0;
} }
.latest-activity { .latest-activity {

1
src/app/main/content/ui/forms/forms.component.scss
View File

@ -3,6 +3,7 @@
.content { .content {
form { form {
width: 100%;
max-width: 800px !important; max-width: 800px !important;
} }

15
src/app/main/quick-panel/quick-panel.component.html
View File

@ -1,6 +1,6 @@
<md-list class="date"> <md-list class="date" cdk-focus-region-start>
<h3 md-subheader> <h3 md-subheader cdk-focus-init>
<span>Today</span> <span>Today</span>
</h3> </h3>
@ -16,7 +16,7 @@
</div> </div>
</md-list> </md-list>
<md-divider></md-divider> <md-divider cdk-focus-region-end></md-divider>
<md-list> <md-list>
<h3 md-subheader> <h3 md-subheader>
@ -50,19 +50,22 @@
</h3> </h3>
<md-list-item> <md-list-item>
<md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications" labelPosition="before"> <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
labelPosition="before">
<h3>Notifications</h3> <h3>Notifications</h3>
</md-slide-toggle> </md-slide-toggle>
</md-list-item> </md-list-item>
<md-list-item> <md-list-item>
<md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud" labelPosition="before"> <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
labelPosition="before">
<h3>Cloud Sync</h3> <h3>Cloud Sync</h3>
</md-slide-toggle> </md-slide-toggle>
</md-list-item> </md-list-item>
<md-list-item> <md-list-item>
<md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters" labelPosition="before"> <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
labelPosition="before">
<h3>Retro Thrusters</h3> <h3>Retro Thrusters</h3>
</md-slide-toggle> </md-slide-toggle>
</md-list-item> </md-list-item>

2
src/index.html
View File

@ -10,7 +10,7 @@
<meta name="description" content="Material design admin template with pre-built apps and pages"> <meta name="description" content="Material design admin template with pre-built apps and pages">
<meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6, Material"> <meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6, Material">
<meta name="author" content="Withinpixels"> <meta name="author" content="Withinpixels">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">