mcloud-images-single

index.html

<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-images-single.markdown

mcloud-images-single

A Pen by James Delibas on CodePen.

License.

script.js

//
// mcloud-pen main module
//
(function() {
    'use strict';
    angular
        .module('mcloud-pen', [
            'angular-loading-bar'
        ])
        .controller('mainController', mainController);

    mainController.$inject = ['$scope'];
    function mainController($scope) {
    }
})();

scripts

<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>

style.css

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;
}

styles

<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" />