<main class=" container cr-paper-container" ng-app="myApp" ng-controller="MainCtrl">
<!-- BEGIN PAPER TEMPLATE -->
<section>
<header class="clearfix">
<h1 ng-if="header.headerLeft" ng-bind="header.headerLeft.text" class="header-left"></h1>
<h1 ng-if="header.headerRight" ng-bind="header.headerRight.text | date" class="header-right"></h1>
</header>
<div class="cr-paper-margin"></div>
<div class="cr-paper-body">
<hr ng-repeat="line in lines track by $index"/>
<div class="cr-paper-contents" ng-bind="body.text"></div>
</div>
</section>
<footer class="text-center">
<p>
Crafted with love by <a href="https://codepen.io/xavisavvy">xavisavvy</a>
</p>
</footer>
<!-- END PAPER TEMPLATE -->
<!-- BEGIN PAPER DIRECTIVE -->
<paper header-left="" header-right="" body=""></paper>
<!-- END PAPER DIRECTIVE -->
<!-- BEGIN CONTROLS SECTION -->
<section class="cr-paper-controls panel panel-primary">
<header class="panel-heading">
<h1>Controls</h1>
</header>
<div class="panel-body">
<div ng-repeat="h in header" class="cr-controls-input">
<label for="{{h.class}}" ng-bind="h.title"></label>
<div class="input-group" title="{{h.title}}">
<span class="input-group-addon">
<i class="fa fa-pencil"></i>
</span>
<input type="text" id="{{h.class}}" class="form-control" ng-model="h.text" placeholder="{{h.title}}" ng-if="!h.disabled" />
<input type="text" id="{{h.class}}" class="form-control" ng-model="h.text" placeholder="{{h.title}}" disabled ng-if="h.disabled" />
</div>
</div>
<div class="cr-controls-input">
<label for="{{body.class}}" ng-bind="body.title"></label>
<div class="input-group" title="{{body.title}}">
<span class="input-group-addon">
<i class="fa fa-pencil"></i>
</span>
<textarea type="text" id="{{body.class}}" ng-model="body.text" placeholder="{{body.placeholder}}" class="form-control"></textarea>
</div>
</div>
</div>
</section>
<!-- END CONTROLS SECTION -->
</main>
@import "compass/css3";
$redSideBorder: 2px solid rgba(255,0,0,0.5);
$bodyLineHeight: 30px;
$bodyMarginWidth: 10%;
$headingHeight: 100px;
body{
background: grey;
font-family: 'Indie Flower', cursive;
line-height: 100%;
button{
font-family: Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
}
footer{
position:fixed;
bottom:0;
right:0;
left:0;
z-index:1500;
background:white;
padding:1%;
@include box-shadow();
}
}
.cr-paper-controls{
$paperControlInputMargin: 10px;
position: fixed;
left:15px;
top:50px;
width:300px;
z-index: 200;
@include box-shadow(0 1px 3px rgba(0,0,0,0.5));
transition: all 0.2s ease-in-out;
@include opacity(0.25);
.cr-controls-input{
margin-top:$paperControlInputMargin;
&:first-child{
margin-top: 0;
}
}
&:hover{
@include box-shadow(1px 3px 5px rgba(0,0,0,0.5));
@include opacity(1);
}
&:active{
@include box-shadow(2px 5px 7px rgba(0,0,0,0.5));
}
}
.cr-paper-container{
position:relative;
background: #F8F8F0;
margin-top:1%;
margin-bottom:1%;
height:1608px;
padding:0;
@include box-shadow(0 1px 2px rgba(0,0,0,0.75));
overflow:hidden;
header{
position: relative;
min-height: $headingHeight;
padding-left: 0.5%;
h1{
position:absolute;
display: block;
margin:0 $bodyMarginWidth;
bottom:0;
@include opacity(0.8);
&.header-right{
right:0;
text-align:right;
}
&.header-left{
left:$bodyMarginWidth / 10;
text-align:left;
}
}
}
.cr-paper-margin{
position:absolute;
top:0;
bottom:0;
width:$bodyMarginWidth;
border-right: $redSideBorder;
z-index: 100;
}
.cr-paper-body{
hr{
border: 1px solid rgba(0,100,255,0.5);
z-index:0;
margin-top:$bodyLineHeight;
&:first-child{
margin-top:0;
}
}
.cr-paper-contents{
position: absolute;
left: $bodyMarginWidth + 0.5%;
top: $headingHeight + 10;
font-size: 1.2em;
line-height: $bodyLineHeight + 2;
z-index: 101;
@include opacity(0.8);
}
}
}
View Compiled
angular.module('myApp', ['myApp.directives', 'myApp.controllers']);
angular.module('myApp.controllers', [])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.header = {
headerLeft: {
text: 'Xavisavvy the savvy chap',
title: 'Page Header - Left',
class: 'header-left',
disabled: null
},
headerRight: {
text: new Date(),
title: 'Page Header - Right',
class: 'header-right',
disabled: 'disabled'
},
};
$scope.body = {
text: 'This is the default text for the page. Feel free to edit it! It even allows for line breaks!',
title: 'Body Text',
class: 'page-body',
placeholder: 'Type your text here',
disabled: null
}
$scope.bodystuff = 'test'
$scope.lines = [];
var count = 50;
for(i=0; i < count; i++){
$scope.bodystuff += " This is something interesting. "
$scope.lines.push("i");
}
console.log($scope.lines.length);
}]);
angular.module('myApp.directives', [])
.directive('paper', function() {
return {
restrict: 'E',
replace: true,
scope:{
headerLeft: '=',
headerRight: '=',
body: '='
},
template: '',
link: function(scope, element, attrs){
// TODO - Figure out how to use a template url from an inline template on CodePen
}
}
});
