<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tjs5000/pen/eeXPMO?depth=everything&order=popularity&page=46&q=Builder&show_forks=false" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style class="cp-pen-styles">*,
*::before,
*::after {
box-sizing: border-box;
}
html {
padding: 0;
margin: 0;
font-size: 16px;
height: 100%;
position: relative;
}
body {
color: #3b4551;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
letter-spacing: 0;
padding: 0;
margin: 0;
height: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
overflow-x: hidden;
}
#MainContent {
height: 100%;
}
#Sidebar,
#rightSideBar {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 14rem;
background: #3b4551;
font-size: 1rem;
color: #ffffff;
}
#rightSideBar {
padding: 10px;
position: relative;
box-shadow: -3px 0 2px rgba(0, 0, 0, 0.2);
transition: transform 0.5s ease;
}
#rightSideBar.move[data-count="0"] {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
#rightSideBar.move[data-count="1"] {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
#rightSideBar.move[data-count="2"] {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
#rightSideBar.move[data-count="3"] {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
#rightSideBar.move[data-count="4"] {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
#rightSideBar.move[data-count="5"] {
transform: translateX(0);
-webkit-transform: translateX(0);
}
#rightSideBar.move.or {
transform: translateX(0);
-webkit-transform: translateX(0);
}
#rightSideBar small {
color: rgba(255, 255, 255, 0.4);
}
#rightSideBar textarea {
background: transparent;
border: 0;
font-size: 1rem;
width: 100%;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
min-height: 100px;
resize: none;
outline: none;
color: #ffffff;
padding: 2px;
cursor: pointer;
}
#rightSideBar textarea:active, #rightSideBar textarea:focus {
background: rgba(255, 255, 255, 0.3);
border: 1px solid #ffffff;
cursor: text;
}
#rightSideBar textarea.big {
min-height: 200px;
}
#CatalogTitle {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 3.125rem;
background: #2b333d;
box-shadow: inset 0 0.1875rem 0.1875rem rgba(0, 0, 0, 0.3), 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.4);
z-index: 10;
padding: 0.9375rem;
}
#Toolbar {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 3.125rem;
background: #4382ba;
box-shadow: inset 0 0.1875rem 0.1875rem rgba(0, 0, 0, 0.3), 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.3);
z-index: 10;
}
#Toolbar input[type="text"] {
color: #ffffff;
line-height: 1rem;
padding-left: 1rem;
background: transparent;
border: 0;
outline: none;
font-size: 1.5rem;
height: calc(100% - 20px);
width: calc(100% - 100px);
margin: 10px;
cursor: pointer;
}
#Toolbar input[type="text"]:focus, #Toolbar input[type="text"]:active {
background: rgba(255, 255, 255, 0.1);
border: 1px solid #ffffff;
cursor: text;
}
#Toolbar label {
color: #ffffff;
font-size: 1rem;
line-height: 3rem;
padding: 1rem 1rem 1rem 0;
}
#Bottom {
height: 100%;
}
#Content {
background: -moz-radial-gradient(center center, circle cover, #46afff 0%, #1f4d78 100%);
background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, #46afff), color-stop(100%, #1f4d78));
background: -webkit-radial-gradient(center center, circle cover, #46afff 0%, #1f4d78 100%);
background: -o-radial-gradient(center center, circle cover, #46afff 0%, #1f4d78 100%);
background: -ms-radial-gradient(center center, circle cover, #46afff 0%, #1f4d78 100%);
background: radial-gradient(circle cover at center center, #46afff 0%, #1f4d78 100%);
background-color: #46afff;
width: 100%;
position: absolute;
top: 50px;
bottom: 0;
overflow-y: auto;
}
#Content h1 {
font-weight: 100;
font-size: 2.25rem;
color: #ffffff;
margin: 0.3125rem;
margin-left: 0.75rem;
}
#Content .card {
cursor: pointer;
}
#Featured {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
position: relative;
padding: 1rem;
height: 17.4rem;
margin-bottom: 2rem;
z-index: 1;
}
#Featured:before {
display: block;
content: "";
position: absolute;
bottom: -1.35rem;
width: calc(100% + 0rem);
height: 4.375rem;
margin-left: -1rem;
background: rgba(254, 254, 254, 0.5);
background: -moz-linear-gradient(top, rgba(254, 254, 254, 0.5) 0%, rgba(254, 254, 254, 0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254, 254, 254, 0.5)), color-stop(100%, rgba(254, 254, 254, 0)));
background: -webkit-linear-gradient(top, rgba(254, 254, 254, 0.5) 0%, rgba(254, 254, 254, 0) 100%);
background: -o-linear-gradient(top, rgba(254, 254, 254, 0.5) 0%, rgba(254, 254, 254, 0) 100%);
background: -ms-linear-gradient(top, rgba(254, 254, 254, 0.5) 0%, rgba(254, 254, 254, 0) 100%);
background: linear-gradient(to bottom, rgba(254, 254, 254, 0.5) 0%, rgba(254, 254, 254, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$from", endColorstr="$to", GradientType=0 );
}
#Featured:after {
content: "";
display: block;
width: 100%;
height: 230px;
background-repeat: no-repeat;
background-color: #1f4d78;
background-blend-mode: luminosity;
background-size: cover;
background-position: right bottom;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
#Featured.weather:after {
background-image: url("https://picsum.photos/1200/230/?random");
}
#Featured.sports:after {
background-image: url("https://picsum.photos/1200/230/?random");
}
#Featured.music:after {
background-image: url("https://picsum.photos/1200/230/?random");
}
#Featured.events:after {
background-image: url("https://picsum.photos/1000/230/?random");
}
#Featured .cards {
overflow: hidden;
width: calc(100% + 32px);
margin-left: -16px;
padding-left: 16px;
height: 100%;
}
#MomentsCatalog {
padding: 1rem;
}
.flexcanvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.column {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flexChild {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.btn,
#addBtn {
background-color: #ffffff;
border: 1px solid #488cc1;
border-radius: 2rem;
color: #488cc1;
padding: 0.25rem;
cursor: pointer;
display: block;
font-size: 0.9rem;
width: 100%;
z-index: 10;
}
.btn:hover, .btn:active, .btn:focus,
#addBtn:hover,
#addBtn:active,
#addBtn:focus {
background: #488cc1;
color: #fff;
cursor: pointer;
outline: none;
}
#addBtn {
width: 44px;
height: 44px;
font-size: 2rem;
line-height: 2.25rem;
position: absolute;
top: 80px;
left: 30px;
background: transparent;
}
.cards {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.cards__item {
display: flex;
padding: 0.5rem;
position: relative;
height: 14.9rem;
}
.cards__item.reflect:after {
display: block;
content: "";
width: 9.375rem;
height: 1.5rem;
opacity: 0.7;
position: absolute;
bottom: -.6rem;
border-radius: 1rem 1rem 0 0;
background: rgba(244, 244, 244, 0.5);
background: -moz-linear-gradient(top, rgba(244, 244, 244, 0.5) 0%, rgba(244, 244, 244, 0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 0.5)), color-stop(100%, rgba(244, 244, 244, 0)));
background: -webkit-linear-gradient(top, rgba(244, 244, 244, 0.5) 0%, rgba(244, 244, 244, 0) 100%);
background: -o-linear-gradient(top, rgba(244, 244, 244, 0.5) 0%, rgba(244, 244, 244, 0) 100%);
background: -ms-linear-gradient(top, rgba(244, 244, 244, 0.5) 0%, rgba(244, 244, 244, 0) 100%);
background: linear-gradient(to bottom, rgba(244, 244, 244, 0.5) 0%, rgba(244, 244, 244, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$from", endColorstr="$to", GradientType=0 );
}
.cards__item:hover .card {
border-color: #4c9fe7;
}
.card {
background-color: #fbfbfb;
border-radius: 0.75rem;
height: 13.44rem;
width: 9.375rem;
margin: 0;
display: flex;
max-width: 15rem;
flex-direction: column;
overflow: hidden;
border: 4px #ffffff solid;
box-shadow: 0 2px 4px 0 rgba(56, 56, 56, 0.35), inset 0 0 6.5px 3.5px #ffffff;
transition: border .5s ease;
}
.card__content {
display: flex;
flex: 1 2 auto;
flex-direction: column;
padding: 0.5rem;
}
.card__title {
color: #488cc1;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0;
height: 4.688rem;
text-align: center;
}
.card__title::first-line {
font-weight: 700;
}
.card__text {
flex: 1 1 auto;
font-size: 0.75rem;
line-height: 1.25rem;
height: 4.688rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
line-height: 1.2rem;
max-height: 4.688rem;
text-align: center;
}
.catalog {
list-style-type: none;
padding: 0;
margin: 0;
}
.catalog li {
cursor: pointer;
padding: 1rem;
height: 3rem;
line-height: 1rem;
}
.catalog li .badge {
display: inline-block;
float: right;
font-size: 0.875rem;
border: 1px solid #fff;
padding: 0 0.5625rem 0.125rem 0.5rem;
border-radius: 1rem;
text-align: center;
}
.catalog li.selected {
background: #4283ba !important;
cursor: default;
}
.catalog li.selected .badge {
background: #31618c;
border-color: #31618c;
}
.catalog li:hover {
background: rgba(71, 140, 192, 0.35);
}
#container {
position: relative;
width: 95%;
min-width: 750px;
margin: 5em auto 2em;
}
ul.builder li.ghost.selected .card {
display: block;
opacity: 0.5;
color: #3b4551;
border: 2px dashed #1f4d78;
}
ul.builder li.ghost.selected .card button.remove {
display: none;
}
ul.builder li.ghost.selected:hover button.remove {
display: none;
}
ul.or {
position: relative;
left: 10rem;
}
ul.builder li.selected {
position: relative;
float: left;
width: 182px;
height: 248px;
overflow: visible;
padding: 1rem;
z-index: 10;
}
ul.builder li.selected:before {
content: "&";
clear: both;
display: block;
position: absolute;
color: #fff;
font-size: 2rem;
line-height: 300%;
text-align: center;
width: 2rem;
height: 100px;
background: #2b333d;
left: -1rem;
top: 50%;
margin-top: -50px;
z-index: -1;
}
ul.builder li.selected:first-of-type:before {
display: none;
}
ul.builder li.selected button.remove {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
display: none;
}
ul.builder li.selected:hover button.remove {
display: block;
}
ul.builder .handle {
width: 100%;
height: 100%;
background: transparent;
position: absolute;
clear: left;
cursor: move;
}
ul.builder.or li.selected {
float: none;
clear: both;
}
ul.builder.or li.selected:before {
content: "OR";
clear: both;
display: block;
position: absolute;
color: #fff;
font-size: 1.5rem;
line-height: 120%;
text-align: center;
height: 2rem;
width: 100px;
background: #1f4d78;
top: 2.1rem;
left: 50%;
margin-left: -50px;
}
ul.builder.or li.selected:first-of-type:before {
display: none;
}
#leftDrawer {
background: #9b9b9b;
position: fixed;
top: 0;
width: 50%;
height: 100%;
z-index: 100;
transform: translateX(-101%);
-webkit-transform: translateX(-101%);
transition: transform 0.5s ease;
}
#leftDrawer .close-drawer {
float: right;
height: 100%;
width: 40px;
font-size: 1.5rem;
background: transparent;
color: #ffffff;
border: 0;
outline: none;
cursor: pointer;
}
#leftDrawer.open {
transform: translateX(0%);
-webkit-transform: translateX(0%);
box-shadow: 5px 0 6px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) {
.left-drawer {
width: 50%;
}
}
.canvas {
width: 100%;
height: 100%;
background-color: #e9e9e9;
background-image: linear-gradient(#d1d1d1 2px, transparent 2px), linear-gradient(90deg, #d1d1d1 2px, transparent 2px), linear-gradient(#d1d1d1 1px, transparent 1px), linear-gradient(90deg, #d1d1d1 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
transition: transform 0.5s ease;
}
.canvas.move[data-count="0"] {
transform: translateX(51%);
-webkit-transform: translateX(51%);
}
.canvas.move[data-count="1"] {
transform: translateX(51%);
-webkit-transform: translateX(51%);
}
.canvas.move[data-count="2"] {
transform: translateX(42.5%);
-webkit-transform: translateX(42.5%);
}
.canvas.move[data-count="3"] {
transform: translateX(33%);
-webkit-transform: translateX(33%);
}
.canvas.move[data-count="4"] {
transform: translateX(23.5%);
-webkit-transform: translateX(23.5%);
}
.canvas.move[data-count="5"] {
transform: translateX(14%);
-webkit-transform: translateX(14%);
}
.canvas.move[data-count="6"] {
transform: translateX(4%);
-webkit-transform: translateX(4%);
}
.canvas.move.or {
transform: translateX(41%);
-webkit-transform: translateX(41%);
}
.query-sentence {
position: absolute;
bottom: 20px;
color: #ffffff;
}
.query-sentence span:after {
content: " AND ";
font-weight: bold;
}
.query-sentence.or span:after {
content: " OR ";
font-weight: bold;
}
.query-sentence span.last:after {
content: ".";
}
.cards__item.ng-move,
.cards__item.ng-enter,
.cards__item.ng-leave {
-webkit-transition: all linear 0.25s;
transition: all linear 0.25s;
}
.cards__item.ng-move:before,
.cards__item.ng-enter:before,
.cards__item.ng-leave:before {
-webkit-transition: all linear 1s;
transition: all linear 1s;
}
.cards__item.ng-leave.ng-leave-active,
.cards__item.ng-move,
.cards__item.ng-enter {
opacity: 0;
transform: scale(0.5);
}
.cards__item.ng-leave.ng-leave-active:before,
.cards__item.ng-move:before,
.cards__item.ng-enter:before {
transform: translateX(110%);
}
.cards__item.ng-leave,
.cards__item.ng-move.ng-move-active,
.cards__item.ng-enter.ng-enter-active {
opacity: 1;
transform: scale(1);
}
.cards__item.ng-leave:before,
.cards__item.ng-move.ng-move-active:before,
.cards__item.ng-enter.ng-enter-active:before {
transform: translateX(0);
}
.label--checkbox {
position: relative;
margin: .5rem;
font-family: Arial, sans-serif;
line-height: 135%;
cursor: pointer;
}
.checkbox {
position: relative;
top: 0;
margin: 0 0.5rem 0 0;
cursor: pointer;
}
.checkbox:before {
transition: all .3s ease-in-out;
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1rem;
height: 1rem;
border: 2px solid #ffffff;
border-radius: 3px;
}
.checkbox:checked:before {
transform: rotate(-45deg);
border-radius: 0;
height: .5rem;
border-color: #ffffff;
border-top-style: none;
border-right-style: none;
}
.checkbox:after {
content: "";
position: absolute;
top: 0rem;
left: 0;
width: 1.1rem;
height: 1.1rem;
background: #4283ba;
cursor: pointer;
}
.logic-selector {
position: absolute;
bottom: 20px;
left: 30px;
z-index: 2;
}
.toggle-option {
border: 1px solid #4283ba;
color: #4283ba;
display: inline-block;
padding: 5px;
position: relative;
text-align: center;
transition: background 600ms ease, color 600ms ease;
}
.toggle-option:first-of-type {
border-radius: 30px 0 0 30px;
}
.toggle-option:last-of-type {
border-radius: 0 30px 30px 0;
}
input[type="radio"].toggle {
display: none;
}
input[type="radio"].toggle + label {
cursor: pointer;
min-width: 60px;
}
input[type="radio"].toggle + label:hover {
background: none;
color: #1f4d78;
}
input[type="radio"].toggle + label:after {
background: #1f4d78;
content: "";
height: 100%;
position: absolute;
top: 0;
transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
width: 100%;
z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
left: 100%;
border-radius: 0 30px 30px 0;
}
input[type="radio"].toggle.toggle-right + label {
margin-left: -5px;
}
input[type="radio"].toggle.toggle-right + label:after {
left: -100%;
border-radius: 30px 0 0 30px;
}
input[type="radio"].toggle:checked + label {
cursor: default;
color: #fff;
background: transparent;
transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
left: 0;
border-radius: 30px;
}
</style></head><body>
<body ng-app="myApp" ng-controller="demo">
<div id="MainContent" class="flexChild flex">
<div class="canvas flexChild flex column" ng-class="{'move': drawerOpen,'or' : queryLogic == 'or'}" data-count="{{items.length}}">
<div id="Toolbar" class="flexChild"><i class="fa fa-pencil" style="color:#fff;padding:15px 0 15px 15px;opacity:.5;font-size:18px;"></i><input type="text" ng-model="newMoment"></div>
<button ng-click="drawerOpen = true" id="addBtn">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="logic-selector">
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="and" type="radio" ng-model="queryLogic">
<label for="toggle-on" class="toggle-option">AND</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="or" type="radio" ng-model="queryLogic">
<label for="toggle-off" class="toggle-option">OR</label>
</div>
<div id="container">
<ul ng-sortable="{animation:300,handle: '.handle',ghostClass:'ghost'}" class="builder" ng-class="{'or' : queryLogic == 'or'}">
<li class="cards__item selected" ng-repeat="item in items track by $index">
<div class="card">
<div class="handle">
</div>
<div class="card__content">
<div class="card__title">{{item.name}}</div>
<p class="card__text">{{item.descr}}</p>
<button class="btn card__btn open-modal">Details</button>
<button ng-click="remove($index)" class="btn remove">X</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="rightSideBar" ng-class="{'move': drawerOpen,'or' : queryLogic == 'or'}" data-count="{{items.length}}" >
<small>Short Description:</small>
<textarea ng-model="shortDescr"></textarea>
<small>Long Description:</small>
<textarea class="big" ng-model="longDescr"></textarea>
<div class="query-sentence" ng-class="{'or' : queryLogic == 'or'}">
<h5>Query:</h5>
<span ng-repeat="item in items" ng-class="{'last':$last}">{{item.name}}</span>
</div>
</div>
<div id="leftDrawer" ng-class="{'open': drawerOpen}">
<div id="Bottom" class="flexChild flex">
<div id="Sidebar" class="flexChild flex column">
<div id="CatalogTitle" class="flexChild">CATEGORIES</div>
<div class="flexChild">
<ul class="catalog">
<li>Category One <span class="badge">12</span></li>
<li class="selected">Category Two <span class="badge">12</span></li>
</ul>
</div>
</div>
<div class="flexChild flex column" style="position:relative;">
<div id="Toolbar" class="flexChild">
<label class="label--checkbox">
<input type="checkbox" class="checkbox" ng-model="autoclose">
Autoclose
</label>
<button ng-click="drawerOpen = false" class="close-drawer"> <i class="fa fa-chevron-left" aria-hidden="true"></i> </button>
</div>
<div id="Content" class="flexChild flex column">
<div id="Featured" class="flexChild weather">
<h1>FEATURED</h1>
<ul class="cards">
<li class="cards__item reflect" ng-repeat="moment in catalog | filter:moment.featured = true track by $index">
<div class="card" ng-click="add(moment.name, moment.descr); $scope.myStyle={background:'red'}" ng-style="myStyle" >
<div class="card__content">
<div class="card__title">{{moment.name}}</div>
<p class="card__text">{{moment.descr}}</p>
<button class="btn card__btn open-modal">Details</button>
</div>
</div>
</li>
</ul>
</div>
<div id="MomentsCatalog" class="flexChild">
<h1>CATEGORY NAME</h1>
<ul class="cards">
<li class="cards__item" ng-repeat="moment in catalog track by $index">
<div class="card" ng-click="add(moment.name, moment.descr)">
<div class="card__content">
<div class="card__title">{{moment.name}}</div>
<p class="card__text">{{moment.descr}}</p>
<button class="btn card__btn">Details</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js'></script><script src='https://rubaxa.github.io/Sortable/Sortable.js'></script><script src='https://rubaxa.github.io/Sortable/ng-sortable.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js'></script>
<script >angular.module("myApp", ["ng-sortable", 'ngAnimate']).controller("demo", [
"$scope",
function($scope) {
$scope.items = [];
$scope.newMoment = "My New Moment";
$scope.autoclose = false;
$scope.queryLogic = "and";
$scope.drawerOpen = false;
$scope.shortDescr = "Add a short description";
$scope.longDescr = "Add a detailed description"
$scope.add = function(myVal, myDescr) {
if($scope.autoclose === true){ $scope.drawerOpen = false;}
$scope.items.push({ name: myVal, descr: myDescr });
};
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
$scope.catalog = [
{
featured: true,
name: "Cold Today",
descr: "Relatively cold weather today."
},
{
featured: false,
name: "Hot Today",
descr: "Relatively cold weather today."
},
{
featured: false,
name: "Rain Today",
descr: "Rain forecasted in werather today."
},
{
featured: true,
name: "Snow Tomorrow",
descr: "Relatively impactful snow forecasted in weather for tomorrow."
},
{
featured: false,
name: "Snow Today",
descr: "Relatively impactful snow forecasted in weather for today."
},
{
featured: false,
name: "Hot Tomorrow",
descr: "Relatively hot weather forecasted for tomorrow."
},
{
featured: true,
name: "Cold Tomorrow",
descr: "Relatively cold weather forecasted for tomorrow."
},
{
featured: false,
name: "Rain Tomorrow",
descr: "Rain forecasted in werather tomorrow."
}
];
}
]);
//# sourceURL=pen.js
</script>
</body></html>
