Skip to content

Instantly share code, notes, and snippets.

@jdelibas

jdelibas/index.html

Created Jun 10, 2016
Embed
What would you like to do?
mcloud-images-single
<div ng-app="mcloud-pen"
ng-controller="mainController"
class="form-mini-container"
>
<div class="row">
<div class="col-xs-2 col-md-4">
</div>
<div class="col-xs-8 col-md-4">
<div class="white-box">
<form>
<h1> View Image </h1>
<div class="form-row" ng-init="inputMethod = true">
<label for="path">Input Method</label>
<div class="radio">
<label>
<input type="radio" ng-model="inputMethod" ng-value="true" checked>
Path
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="inputMethod" ng-value="false">
Path elements
</label>
</div>
</div>
<div class="form-row" ng-show="inputMethod">
<label for="path">Path</label>
<input class="form-control"
name="path"
ng-model="form.path"
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
placeholder=":uid/:size/:filename" />
</div>
<div class="form-row" ng-show="!inputMethod">
<label for="uid">User Id</label>
<input class="form-control"
name="uid"
ng-model="form.uid"
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
placeholder="user id" />
</div>
<div class="form-row" ng-show="!inputMethod">
<label for="size">Size</label>
<input class="form-control"
name="size"
ng-model="form.size"
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
placeholder="size" />
</div>
<div class="form-row" ng-show="!inputMethod">
<label for="filename">Filename</label>
<input class="form-control"
name="filename"
ng-model="form.filename"
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
placeholder="filename" />
</div>
</form>
</div>
</div>
<div class="col-xs-2 col-md-4">
</div>
</div>
<div class="row" ng-cloak>
<div class="col-md-2">
</div>
<div class="col-xs-12 col-md-8">
<div class="white-box">
<h1> Image </h1>
<div ng-show="!inputMethod">
<img class="image-responsive" ng-src="https://mcloud-api-staging.herokuapp.com/api/v1/images/{{form.uid}}/{{form.size}}/{{form.filename}}" />
</div>
<div ng-show="inputMethod">
<img class="image-responsive" ng-src="https://mcloud-api-staging.herokuapp.com/api/v1/images/{{form.path}}" />
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
<div>
//
// mcloud-pen main module
//
(function() {
'use strict';
angular
.module('mcloud-pen', [
'angular-loading-bar'
])
.controller('mainController', mainController);
mainController.$inject = ['$scope'];
function mainController($scope) {
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.6.0/json-formatter.min.js"></script>
html,
body {
background-color: #f3f3f3;
}
.form-mini-container {
font: normal 14px sans-serif;
text-align: center;
color: #5f5f5f;
}
.form-mini-container h1 {
color: #4c565e;
font-size: 24px;
padding-bottom: 30px;
border-bottom: 2px solid #6caee0;
font-weight: bold;
margin: 0;
}
.white-box {
overflow: auto;
padding: 12px;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.form-row {
display: block;
text-align: left;
margin-bottom: 23px;
}
/* Making the form responsive. Remove this media query
if you don't need the form to work on mobile devices. */
@media (max-width: 600px) {
.form-mini-container {
margin-top: 0;
}
}
/*
100% height columns using flex
*/
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin: 1em 1em;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.json-formatter-row {
text-align: left;
}
.json-formatter-row .string {
white-space: initial;
}
.label-as-badge {
border-radius: 0.3em;
display: inline-block;
margin: 0 0.1em;
}
.bottom-border {
border-bottom: 1px solid #6caee0;
}
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.6.0/json-formatter.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment