eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-12 11:20:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Demo styling tweaks (#105)

Browse Source 
* html demo tweaks

* in-progress demo styling

* merge fies

* old demo cleanup
This commit is contained in:
Jeffrey Warren
2017-09-06 14:34:24 -04:00
committed by GitHub
parent dc9827049a
commit 1f3000b7f9
6 changed files with 1755 additions and 2158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
examples/demo-old.css Normal file
View File

@@ -0,0 +1,82 @@
/* https://github.com/theleagueof/league-spartan */
/*@font-face {
font-family: 'League Spartan';
src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
font-weight: bold;
font-style: normal;
}*/
body {
padding: 20px;
margin: 0 auto;
max-width: 700px;
background: #f8f8fa;
}
h1 {
font-family: 'League Spartan';
color: #445;
}
.header {
text-align: center;
}
.panels {
}
.panel {
background: #f8f8fa;
padding: 20px 0;
margin-bottom: 20px;
border-bottom: 1px dashed #ccc;
}
.panel img {
max-width: 100%;
}
.instructions {
color: #aaa;
}
.log h4 {
text-align: center;
}
.log {
margin-top: 20px;
padding: 10px;
font-size: 9px;
font-family: monospace;
color: #666;
background: #efeff6;
border-radius: 4px;
}
/* ImageSelect styles */
.ismod-image-select .mod-drop {
border-radius: 4px;
background: #efeff6;
color: #aaa;
padding: 20px;
width: 100%;
margin-bottom: 10px;
border: 4px dashed #ccc;
text-align: center;
}
.ismod-image-select .mod-drop.hover {
background: #ddd;
}
.ismod-image-select .mod-drop img {
width: 100%;
}

193
examples/demo.css
View File

@@ -1,119 +1,92 @@
/*@font-face {
font-family: "Poiret One";
src: url("Poiret One.woff2");
/* https://github.com/theleagueof/league-spartan */
@font-face {
font-family: 'League Spartan';
src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
font-weight: bold;
font-style: normal;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poiret One";
}
html, body {
min-height: 100vh;
width: 100vw;
}
body {
background: #fff;
}
.wrapper {
width: 100vw;
max-width: 1000px;
height: 100%;
min-height: 100vh;
margin: auto;
position: relative;
}
header {
position: relative;
height: 150px;
font-size: 45px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
footer {
position: absolute;
bottom: 0;
left: 0;
display: flex;
width: 100%;
align-items: center;
justify-content: space-around;
padding: 10px 0;
font-size: 20px;
}
section {
position: relative;
width: 100%;
min-height: 100px;
padding: 10px 15px;
font-size: 25px;
margin-bottom: 50px;
}
.rh {
display: flex;
flex-direction: column;
}
section .r {
display: flex;
flex-direction: row;
flex: auto;
align-items: center;
justify-content: space-around;
margin: 10px;
}
section .c {
flex: auto;
display: flex;
align-items: center;
justify-content: center;
}
section span {
margin: 0 5px;
}*/
#addStep select, button, #addStep input {
font-family: sans-serif;
font-size: 18px !important;
height: 30px !important;
body {
padding: 20px;
margin: 0 auto 200px;
max-width: 1000px;
background: #f8f8fa;
}
h1 {
font-family: 'League Spartan';
color: #445;
}
.header {
text-align: center;
}
.nomargin {
margin: 0 !important;
}
.details {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
#imageSelect {
padding: 30px;
margin: 0 20% 30px;
border: 4px dashed #ccc;
border-radius: 8px;
text-align: center;
color: #444;
}
#steps .row {
display: flex;
flex-direction: row;
flex: auto;
align-items: center;
justify-content: space-around;
.step {
margin-bottom: 20px;
}
.step .img-thumbnail {
margin-bottom: 20px;
}
.details {
border-top: 3px solid #444;
padding-left: 6px;
}
.details h3 {
font-family: monospace;
margin-top: 12px;
font-size: 1.3em;
}
.det {
padding: 10px 16px;
text-decoration: italic;
}
.tools {
margin: 10px 0;
}
#addStep {
max-width: 500px;
margin: 20px auto;
}
#addStep .labels {
text-align: right;
padding: 6px;
margin: 2px;
font-weight: bold;
}
@media (max-width:768px) {
#addStep .labels {
text-align: left;
}
}
#addStep .add {
text-align: center;
margin: 10px;
}
.jumbotron {
background: transparent;
}
.form-horizontal {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.btn {
line-height: 1.2
}
.btn-lg {
line-height: 0.7
}
body {
/*background: #f8f8fa;*/
}
.det {
font-size: 1.7rem;
}

64
examples/index.html
View File

@@ -23,32 +23,33 @@
<body>
<div class="container">
<div class="container-fluid">
<header class="jumbotron text-center">
<header class="text-center">
<h1>Image Sequencer</h1>
<p><h3>Select an image to start with!</h3></p>
<center><input type="file" id="file" value=""></center>
<h3>
<a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a>
</h3>
</header>
<section id="steps" class="row">
</section>
<div id="imageSelect">
<p><i>Select an image to start with!</i></p>
<center><input type="file" id="file" value=""></center>
</div>
<section id="addStep" class="jumbotron text-center">
<section id="steps" class="row"></section>
<section id="addStep">
<div class="row">
<h4>Add Step :</h4>
<select style="font-family: sans-serif; height: 30px">
<option value="none" disabled selected>Please Select</option>
<select class="form-control">
<option value="none" disabled selected>Select a new step...</option>
</select>
</div>
<hr />
<div class="row">
<div>
<h4>Options:</h4>
</div>
<div id="options" class="form-horizontal">
</div>
<div id="options"></div>
</div>
<div class="row" style="margin: 5px">
<div class="row add">
<button class="btn btn-success btn-lg" name="add">Add Step</button>
</div>
</section>
@@ -92,18 +93,23 @@
onSetup: function(step) {
step.ui = '\
<div class="row">\
<div>\
<img alt="" class="img-thumbnail"/>\
<div class="row step">\
<div class="col-md-4 details">\
<h3>'+step.name+'</h3>\
<p><i>'+(step.description || '')+'</i></p>\
</div>\
<div class="details">\
<h2>'+step.name+'&nbsp;</h2>\
<div class="col-md-8">\
<img alt="" class="img-thumbnail"/>\
</div>\
</div>\
';
var removebutton =
'<button class="remove btn btn-danger">X</button>';
var tools =
'<div class="tools btn-group">\
<button confirm="Are you sure?" class="remove btn btn-xs btn-default">\
<i class="fa fa-trash"></i>\
</button>\
</div>';
step.ui = parser.parseFromString(step.ui,'text/html');
step.ui = step.ui.querySelector('div.row');
@@ -123,9 +129,9 @@
}
if(step.name != "load-image")
step.ui.querySelector('div.details h2').appendChild(
parser.parseFromString(removebutton,'text/html')
.querySelector('button')
step.ui.querySelector('div.details').appendChild(
parser.parseFromString(tools,'text/html')
.querySelector('div')
);
steps.appendChild(step.ui);
@@ -166,11 +172,11 @@
for(var input in modulesInfo[m].inputs) {
$('#options').append(
'<div class="row">\
<div class="col-md-2">\
<div class="col-md-5 labels">\
'+input+':\
</div>\
<div class="col-md-2">\
<input type="text" name="'+input+'" value="" placeholder="'+
<div class="col-md-5">\
<input class="form-control" type="text" name="'+input+'" value="" placeholder="'+
modulesInfo[m].inputs[input].default+'"/>\
</div>\
</div>'

2
examples/replace.html
View File

@@ -9,7 +9,7 @@
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../dist/image-sequencer.css" rel="stylesheet">
<link href="demo-old.css" rel="stylesheet">
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>