Skip to content

Commit

Permalink
Update index html style
Browse files Browse the repository at this point in the history
  • Loading branch information
John Bryan Sazon committed May 2, 2018
1 parent 024d336 commit 8cd9af1
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 66 deletions.
Binary file modified docs/samplesite_android.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/samplesite_ios.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
226 changes: 160 additions & 66 deletions parser/templates.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,26 +63,90 @@ const plistTemplateString = `<?xml version="1.0" encoding="UTF-8"?>
</dict>
</plist>`

var indexHTMLTemplateString = `<!DOCTYPE HTML5>
const indexHTMLTemplateString = `<!DOCTYPE HTML5>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
* {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media only screen and (max-width: 600px) {
.table-container {
width: 100%;
table-layout: fixed;
}
.logo-wrapper {
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.table-container {
width: 100%;
table-layout: fixed;
}
.logo-wrapper {
width: 100%;
}
}
@media only screen and (min-width: 600px) {
.table-container {
width: 100%;
table-layout: fixed;
}
.logo-wrapper {
width: 100%;
}
}
@media only screen and (min-width: 768px) {
.table-container {
width: 100%;
table-layout: fixed;
}
.logo-wrapper {
width: 100%;
}
}
@media only screen and (min-width: 992px) {
.table-container {
width: 40%;
table-layout: fixed;
}
.logo-wrapper {
width: 40%;
}
}
@media only screen and (min-width: 1200px) {
.table-container {
width: 40%;
table-layout: fixed;
}
.logo-wrapper {
width: 40%;
}
}
.main-container {
height: inherit;
width: inherit;
height: 100%;
width: 100%;
margin-top: 2%;
}
.demo-card-wide.mdl-card {
width: 512px;
margin: 0 auto;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 116px;
Expand All @@ -96,79 +160,110 @@ var indexHTMLTemplateString = `<!DOCTYPE HTML5>
.logo {
background: url('appicon.png') center / cover;
display: block;
float: left;
width: 80px;
height: 80px;
}
.logo-title {
display: block;
float: left;
display: block;
text-indent: 2%;
height: 80px;
line-height: 80px;
height: 50px;
line-height: 50px;
}
.release-note {
margin: 0 auto;
margin-top: 10px;
width: 512px;
margin-top: -1px;
}
.values {
line-height: 2vw;
height: 2vw;
width: 40%;
display: inline-block;
text-align: right;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
.labels {
width: 40%;
display: inline-block;
line-height: 2vw;
height: 2vw;
vertical-align: top;
text-align: left;
font-weight: bold
}
.label-value-wrapper {
padding: 0;
display: inline-block;
margin: 0 auto;
padding: 2px;
}
td {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
</style>
</head>
<body>
<div class="main-container">
<!-- elease Details -->
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<div class="logo"></div>
<div class="logo-title mdl-card__title-text">{{.Name}}</div>
</div>
<div class="mdl-card__supporting-text" style="padding: 0; width: 100%">
<table class="mdl-data-table mdl-js-data-table" style="width: 100%; border: 0px">
<tbody>
{{if .IsIOS -}}
<tr>
<td class="mdl-data-table__cell--non-numeric">CFBundleShortVersion</td>
<td class="mdl-data-table__cell--non-numeric">{{.Version}}</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">CFBundleVersion</td>
<td class="mdl-data-table__cell--non-numeric">{{.Build}}</td>
</tr>
{{else -}}
<tr>
<td class="mdl-data-table__cell--non-numeric">Version Name</td>
<td class="mdl-data-table__cell--non-numeric">{{.Version}}</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Version Code</td>
<td class="mdl-data-table__cell--non-numeric">{{.Build}}</td>
</tr>
{{end -}}
<tr>
<td class="mdl-data-table__cell--non-numeric">Bundle ID</td>
<td class="mdl-data-table__cell--non-numeric">{{.BundleId}}</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Upload Date</td>
<td class="mdl-data-table__cell--non-numeric">{{.UploadDate}}</td>
</tr>
</tbody>
</table>
<!-- Release Details -->
<div class="demo-card-wide mdl-card mdl-shadow--1dp logo-wrapper" style="margin: 0 auto; text-align: center; margin-bottom: 5px">
<div class="mdl-card__title" style="margin: 0 auto; width: 100%; height: inherit; display: block">
<div style="width: 100%; display: block; margin: 0 auto">
<div class="logo" style="margin: 0 auto"></div>
</div>
<div style="width: 100%; display: block">
<div class="logo-title mdl-card__title-text">{{.Name}}</div>
{{if .IsIOS}}
<a href="itms-services://?action=download-manifest&amp;url={{.PlistURL}}" class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Install
</a>
{{else}}
<a href="{{.DownloadURL}}" class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Install
</a>
{{end}}
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
</div>
<table class="mdl-data-table mdl-js-data-table table-container release-note">
<tbody>
{{if .IsIOS -}}
<a href="itms-services://?action=download-manifest&amp;url={{.PlistURL}}" class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Install
</a>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="font-weight: bold">CFBundleShortVersion</td>
<td class="mdl-data-table__cell--non-numeric">{{.Version}}</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="font-weight: bold">CFBundleVersion</td>
<td class="mdl-data-table__cell--non-numeric">{{.Build}}</td>
</tr>
{{else -}}
<a href="{{.DownloadURL}}" class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Install
</a>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="font-weight: bold">Version Name</td>
<td class="mdl-data-table__cell--non-numeric">{{.Version}}</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="font-weight: bold">Version Code</td>
<td class="mdl-data-table__cell--non-numeric">{{.Build}}</td>
</tr>
{{end -}}
</div>
</div>
<!-- Release Notes -->
<tr>
<td class="mdl-data-table__cell--non-numeric" style="font-weight: bold">Bundle ID</td>
<td class="mdl-data-table__cell--non-numeric">{{.BundleId}}</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="font-weight: bold">Upload Date</td>
<td class="mdl-data-table__cell--non-numeric">{{.UploadDate}}</td>
</tr>
</tbody>
</table>
{{if .Changelogs}}
<table class="mdl-data-table mdl-shadow--2dp mdl-js-data-table release-note">
<thead>
Expand All @@ -191,5 +286,4 @@ var indexHTMLTemplateString = `<!DOCTYPE HTML5>
{{end}}
</div>
</body>
</html>
`
</html>`

0 comments on commit 8cd9af1

Please sign in to comment.