Skip to content

Instantly share code, notes, and snippets.

Avatar

Chris Griffith chrisgriffith

View GitHub Profile
@chrisgriffith
chrisgriffith / config.xml
Created Aug 13, 2020
Cordova Spash screen and Icons
View config.xml
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
View home.scss
.card-body {
background-color: #ffffff;
padding: 30px;
height: calc(100vh - (200px + 56px));
overflow: hidden;
.user-meta {
padding-top: 40px;
.playername {
View home.html
<div class="card-body">
<div class="user-meta ion-text-center">
<h3 class="playername">Roger Federer</h3>
<h5 class="country">Switzerland</h5>
<h6 class="ranking">Current ranking: <ion-chip>
<ion-label>2</ion-label>
</ion-chip>
</h6>
</div>
<ion-button expand="full" color="primary">http://rogerfederer.com</ion-button>
View home.html
<div class="card">
<div class="header">
<div class="avatar">
<img src="../../assets/player104.png" alt="">
</div>
</div>
</div>
View home.scss
.card {
margin: 0 auto;
.header {
height: 200px;
.avatar {
width: 160px;
height: 160px;
position: relative;
View global.scss
ion-toolbar {
   --background: var(--mycolor);
   --color: var(--mytextcolor);
}
View global.scss
ion-toolbar {
   --background: rebeccapurple;
   --color: #ffffff;
}
View home.page.scss
:root {
 --mycolor: rebeccapurple;
 --mytextcolor: #fff;
 /** primary **/
 --ion-color-primary: #3880ff;
 --ion-color-primary-rgb: 56, 128, 255;
 --ion-color-primary-contrast: #ffffff;
 --ion-color-primary-contrast-rgb: 255, 255, 255;
 --ion-color-primary-shade: #3171e0;
View home.page.html
<ion-header>
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button fill="outline">
       <ion-icon slot="start" name="star"></ion-icon>
       Star
     </ion-button>
   </ion-buttons>
   <ion-title>Theme Demo</ion-title>
   <ion-buttons slot="primary">
@chrisgriffith
chrisgriffith / home.html
Created Apr 25, 2019
Ionic Design: Profile - Step 1
View home.html
<ion-header translucent no-border>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button color="light">
<ion-icon slot="start" name="ios-arrow-back"></ion-icon>
Favorites
</ion-button>
</ion-buttons>
<ion-title>&nbsp;</ion-title>
<ion-buttons slot="end">