mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-12 11:20:02 +01:00
Demo styling tweaks (#105)
* html demo tweaks * in-progress demo styling * merge fies * old demo cleanup
This commit is contained in:
Jeffrey Warren
GitHub
2380
dist/image-sequencer.js
vendored
2380
dist/image-sequencer.js
vendored
File diff suppressed because one or more lines are too long
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 id="options"></div>
|
||||
</div>
|
||||
<div id="options" class="form-horizontal">
|
||||
</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+' </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>'
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
{
|
||||
"name": "Crop",
|
||||
"description": "Crop image to given x, y, w, h",
|
||||
"url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
|
||||
"inputs": {
|
||||
"x": {
|
||||
"type": "integer",
|
||||
|
||||
Reference in New Issue
Block a user