mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Fixed: Fullwidth simple page layout doesn't scroll
+ 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
parent
e6ee5d017e
commit
6747610771
|
|
@ -273,6 +273,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
}
|
||||
|
||||
// Fullwidth
|
||||
&.fullwidth {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&.fullwidth,
|
||||
&.inner-sidenav {
|
||||
min-height: 100%;
|
||||
|
|
@ -445,7 +449,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
&.simple {
|
||||
|
||||
&.fullwidth {
|
||||
overflow: visible;
|
||||
|
||||
> .content {
|
||||
flex: 1 0 auto;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
#boards {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.board-list {
|
||||
padding: 32px 0;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div id="forgot-password-form">
|
||||
|
||||
<div class="logo">
|
||||
<span>F</span>
|
||||
<img src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<div class="title">RECOVER YOUR PASSWORD</div>
|
||||
|
|
|
|||
|
|
@ -31,14 +31,7 @@
|
|||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
font-size: 86px;
|
||||
font-weight: 500;
|
||||
margin: 32px auto;
|
||||
color: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
background: mat-color($accent);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<div id="login" fxLayout="row" fxLayoutAlign="start">
|
||||
|
||||
<div id="login-intro" fxFlex fxHide fxShow.gt-xs>
|
||||
|
||||
<div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
|
||||
<span>F</span>
|
||||
<img src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<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,
|
||||
vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
|
||||
|
|
|
|||
|
|
@ -17,15 +17,7 @@
|
|||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
font-size: 86px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 32px;
|
||||
color: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background: mat-color($accent);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@
|
|||
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
<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 class="title">LOGIN TO YOUR ACCOUNT</div>
|
||||
|
|
@ -62,6 +63,9 @@
|
|||
<span class="text">Don't have an account?</span>
|
||||
<a class="link" [routerLink]="'/pages/auth/register'">Create an account</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -31,14 +31,7 @@
|
|||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
font-size: 86px;
|
||||
font-weight: 500;
|
||||
margin: 32px auto;
|
||||
color: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
background: mat-color($accent);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<div id="register" fxLayout="row" fxLayoutAlign="start">
|
||||
|
||||
<div id="register-intro" fxFlex fxHide fxShow.gt-xs>
|
||||
|
||||
<div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
|
||||
<span>F</span>
|
||||
<img src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<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,
|
||||
vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
|
||||
|
|
|
|||
|
|
@ -17,15 +17,7 @@
|
|||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
font-size: 86px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 32px;
|
||||
color: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background: mat-color($accent);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@
|
|||
<div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
<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 class="title">CREATE AN ACCOUNT</div>
|
||||
|
|
@ -60,6 +61,9 @@
|
|||
<span class="text">Already have an account?</span>
|
||||
<a class="link" [routerLink]="'/pages/auth/login'">Login</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -31,14 +31,7 @@
|
|||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
font-size: 86px;
|
||||
font-weight: 500;
|
||||
margin: 32px auto;
|
||||
color: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
background: mat-color($accent);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div id="reset-password-form">
|
||||
|
||||
<div class="logo">
|
||||
<span>F</span>
|
||||
<img src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<div class="title">RESET YOUR PASSWORD</div>
|
||||
|
|
|
|||
|
|
@ -31,14 +31,7 @@
|
|||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
font-size: 86px;
|
||||
font-weight: 500;
|
||||
margin: 32px auto;
|
||||
color: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
background: mat-color($accent);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
<div class="top">
|
||||
|
||||
<div class="logo md-accent-bg">
|
||||
<span>F</span>
|
||||
<div class="logo">
|
||||
<img src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<div class="title">Hey! Thank you for checking out our app.</div>
|
||||
|
|
|
|||
|
|
@ -37,14 +37,7 @@
|
|||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
font-size: 86px;
|
||||
font-weight: 500;
|
||||
margin: 32px auto;
|
||||
color: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
background: mat-color($accent);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@
|
|||
</div>
|
||||
|
||||
<div class="issuer md-accent-bg" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="logo" fxLayout="row" fxLayoutAlign="center center">
|
||||
<span>F</span>
|
||||
<div class="logo">
|
||||
<img src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
|
|
@ -124,8 +124,8 @@
|
|||
<div class="footer">
|
||||
<div class="note">Please pay within 15 days. Thank you for your business.</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<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 class="small-note">
|
||||
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque
|
||||
|
|
|
|||
|
|
@ -68,8 +68,7 @@
|
|||
|
||||
.logo {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
font-size: 72px;
|
||||
padding: 0 8px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
|
|
@ -186,12 +185,7 @@
|
|||
.logo {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
margin-right: 24px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small-note {
|
||||
|
|
@ -341,7 +335,6 @@
|
|||
}
|
||||
|
||||
.logo {
|
||||
font-size: 14pt;
|
||||
margin-right: 8pt;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@
|
|||
<div class="ids" fxLayout="column">
|
||||
|
||||
<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 class="divider"></div>
|
||||
|
|
@ -145,8 +146,8 @@
|
|||
<div class="footer">
|
||||
<div class="note">Please pay within 15 days. Thank you for your business.</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<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 class="small-note">
|
||||
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque
|
||||
|
|
|
|||
|
|
@ -35,8 +35,6 @@
|
|||
|
||||
.logo {
|
||||
width: 156px;
|
||||
height: 156px;
|
||||
font-size: 115px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,12 +152,7 @@
|
|||
.logo {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
margin-right: 24px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small-note {
|
||||
|
|
@ -205,8 +198,6 @@
|
|||
|
||||
.logo {
|
||||
width: 60pt;
|
||||
height: 60pt;
|
||||
font-size: 40pt;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
|
||||
|
||||
<div class="logo">
|
||||
<span>F</span>
|
||||
<img src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<div class="title">Closed for scheduled maintenance!</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
#maintenance-form {
|
||||
max-width: 384px;
|
||||
padding: 32px;
|
||||
padding: 48px;
|
||||
background: #FFFFFF;
|
||||
text-align: center;
|
||||
@include mat-elevation(7);
|
||||
|
|
@ -30,14 +30,7 @@
|
|||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
font-size: 86px;
|
||||
font-weight: 500;
|
||||
margin: 32px auto;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border-radius: 2px;
|
||||
background: mat-color($accent);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<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"
|
||||
fxFlexOrder.gt-sm="1"
|
||||
<div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65"
|
||||
*fuseIfOnDom [@animateStagger]="{value:'50'}">
|
||||
|
||||
<div class="profile-box add-post"
|
||||
|
|
@ -135,8 +134,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35" fxFlexOrder="1"
|
||||
fxFlexOrder.gt-sm="2">
|
||||
<div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35">
|
||||
|
||||
<div class="profile-box latest-activity" fxLayout="column"
|
||||
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@
|
|||
padding-left: 32px;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
padding: 0;
|
||||
padding: 32px 0 0 0;
|
||||
}
|
||||
|
||||
.latest-activity {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
.content {
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
max-width: 800px !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</h3>
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</md-list>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider cdk-focus-region-end></md-divider>
|
||||
|
||||
<md-list>
|
||||
<h3 md-subheader>
|
||||
|
|
@ -50,19 +50,22 @@
|
|||
</h3>
|
||||
|
||||
<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>
|
||||
</md-slide-toggle>
|
||||
</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>
|
||||
</md-slide-toggle>
|
||||
</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>
|
||||
</md-slide-toggle>
|
||||
</md-list-item>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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="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 href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user