From d9e48c6a2758d0048244a10b285290e50ee1d82f Mon Sep 17 00:00:00 2001 From: tatvarth Date: Tue, 8 Mar 2016 00:53:01 -0800 Subject: [PATCH] created a responsive web application from angular seed --- app/app.css | 206 ++++++++++++++++-- app/app.js | 6 +- app/assets/ic_close_24px.svg | 4 + app/assets/ic_menu_24px.svg | 4 + .../widgets/destination-card/btnPanel.html | 4 + .../destination-card/destination-card.html | 30 +++ .../widgets/destination-card/directives.js | 9 + .../widgets/destination-card/template1.html | 8 + .../widgets/destination-card/template2.html | 16 ++ .../widgets/destination-card/template3.html | 18 ++ .../partials/widgets/header/directives.js | 9 + .../partials/widgets/header/header.html | 6 + .../partials/widgets/header/menuDesktop.html | 10 + app/index.html | 23 +- app/view1/view1.html | 6 +- app/view1/view1.js | 90 +++++++- app/view2/view2.html | 5 - app/view2/view2.js | 14 -- app/view2/view2_test.js | 16 -- 19 files changed, 408 insertions(+), 76 deletions(-) create mode 100644 app/assets/ic_close_24px.svg create mode 100644 app/assets/ic_menu_24px.svg create mode 100644 app/components/partials/widgets/destination-card/btnPanel.html create mode 100644 app/components/partials/widgets/destination-card/destination-card.html create mode 100644 app/components/partials/widgets/destination-card/directives.js create mode 100644 app/components/partials/widgets/destination-card/template1.html create mode 100644 app/components/partials/widgets/destination-card/template2.html create mode 100644 app/components/partials/widgets/destination-card/template3.html create mode 100644 app/components/partials/widgets/header/directives.js create mode 100644 app/components/partials/widgets/header/header.html create mode 100644 app/components/partials/widgets/header/menuDesktop.html delete mode 100644 app/view2/view2.html delete mode 100644 app/view2/view2.js delete mode 100644 app/view2/view2_test.js diff --git a/app/app.css b/app/app.css index c92524070a..a1fc30897f 100644 --- a/app/app.css +++ b/app/app.css @@ -1,30 +1,196 @@ -/* app css stylesheet */ -.menu { - list-style: none; - border-bottom: 0.1em solid black; - margin-bottom: 2em; - padding: 0 0 0.5em; +/*common code*/ +body{ + background-color:#d3d3d3; + padding-bottom: 50px; } - -.menu:before { - content: "["; +#header{ + background-color: red; + width:100%; + padding: 0px; + font-size: 20px; + line-height: 2em; } - -.menu:after { - content: "]"; +#header>div{ + font-size: 15px; + line-height: 2em; +} +.headerText{ + display: inline-block; + padding: 0px 0px 0px 10px; + color: white; +} +section{ + border:1px solid #dfdfdf; + background-color: white; + margin:5px; + font-size: 15px; } -.menu > li { - display: inline; +.cardTextDiv{ + padding:10px; +} +.cardTextDiv.version1 h1{ + font-size:22px; + color:#ff1493; +} +.cardButtonPanel{ + border-top:solid 1px #dfdfdf; +} +.cardButtonPanel>span{ + display: table-cell; + padding: 10px 10px; + word-break: break-word; + vertical-align: middle; + font-weight: bold; + } +.cardSecondBtnLbl{ + color:orange; + } +.flex-container{ + display: initial; + /* + display: -webkit-flex; + display: flex; + flex-direction:column; + justify-content: center;*/ + width: 60%; +} +.flex-container-outer{ + display: -webkit-flex; + display: flex; +} +.flex-item{ + margin: 1px; +} +.flex-item.flex-item1{ + height: 100%; + width: 40%; +} +.flex-item.flex-item1 img{ + width: 100%; + height: 190px; +} +.flex-item.flex-item2>.cardTextDivV2{ + padding: 0px 0px 0px 10px; +} +.flex-item.flex-item2.upper{ + height:138px; +} +.flex-item.flex-item2.lower{ + height:50px; +} +.cardTxtHeading{ + font-size:20px; + display: block; +} +.cardTxtSub{ + color: gray; + font-size: small; +} +.cardDataImgVersion3{ + position: relative; +} + .bottomleft { + position: absolute; + bottom: 0; + left: 0.5em; + width: 400px; + font-weight: bold; + color: #fff; + } +.xyz{ + height: 190px; + width: 100%; +} +.xyzText{ + position: absolute; + text-align: center; + font-size: 20px; + bottom: 0; + width: 100%; + font-weight: bold; + color: #fff; } -.menu > li:before { - content: "|"; - padding-right: 0.3em; + +@media (max-width: 600px){ + + .hamburger{ + display: inline-block; + padding: 0px 10px 0px 10px; + height: 24px; + width: 24px; + background-image:url('assets/ic_menu_24px.svg'); + background-repeat: no-repeat; + background-size: 24px 24px; + } + .hamburgerCross{ + display: inline-block; + padding: 0px 10px 0px 10px; + height: 24px; + width: 24px; + background-image:url('assets/ic_close_24px.svg'); + background-repeat: no-repeat; + background-size: 24px 24px; + + } + .menuItemsMobile{ + border-top:1px solid #dfdfdf; + padding: 10px; + text-decoration: none; + color: black; + } + .menuMobile{ + display: flex; + background-color: white; + font-size: 15px; + font-weight: bold; + flex-direction: column; + } +.menuDesktop, .menuItemsDesktop{ + display: none; +} +} +@media (min-width:601px){ + .parentDisable{ + position:fixed; + top:0; + left:0; + background:#000; + opacity:0.8; + z-index:998; + height:100%; + width:100%; + } + .menuMobile, .menuItemsMobile{ + display: none; } + .menuDesktop{ + display: flex; + background-color: white; + font-size: 15px; + font-weight: bold; + } + .menuItemsDesktop{ + padding: 10px; + text-decoration: none; + color: black; + } + .hamburger{ + display: none; + } + + .col1{ + float: left; + max-width:50%; + } + .col2{ + float: right; + max-width: 50%; + } -.menu > li:nth-child(1):before { - content: ""; - padding: 0; + } + + diff --git a/app/app.js b/app/app.js index 21eccdb8ea..66b9f293f8 100644 --- a/app/app.js +++ b/app/app.js @@ -4,8 +4,10 @@ angular.module('myApp', [ 'ngRoute', 'myApp.view1', - 'myApp.view2', - 'myApp.version' + 'myApp.version', + 'destinationCardDirectives', + 'headerDirective' + ]). config(['$routeProvider', function($routeProvider) { $routeProvider.otherwise({redirectTo: '/view1'}); diff --git a/app/assets/ic_close_24px.svg b/app/assets/ic_close_24px.svg new file mode 100644 index 0000000000..6c375ca890 --- /dev/null +++ b/app/assets/ic_close_24px.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/ic_menu_24px.svg b/app/assets/ic_menu_24px.svg new file mode 100644 index 0000000000..46182025f0 --- /dev/null +++ b/app/assets/ic_menu_24px.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/components/partials/widgets/destination-card/btnPanel.html b/app/components/partials/widgets/destination-card/btnPanel.html new file mode 100644 index 0000000000..1b595f76dd --- /dev/null +++ b/app/components/partials/widgets/destination-card/btnPanel.html @@ -0,0 +1,4 @@ +
+ {{cardData.firstButtonLabel}} + {{cardData.secondButtonLabel}} +
\ No newline at end of file diff --git a/app/components/partials/widgets/destination-card/destination-card.html b/app/components/partials/widgets/destination-card/destination-card.html new file mode 100644 index 0000000000..4fcb4b4071 --- /dev/null +++ b/app/components/partials/widgets/destination-card/destination-card.html @@ -0,0 +1,30 @@ +
+
+
+
+
+ +
+
+ +
+
+ Error in data: Template version did not match. +
+
+
+
+
+
+
+
+ +
+
+ Error in data: Template version did not match. +
+
+
+
+ +
\ No newline at end of file diff --git a/app/components/partials/widgets/destination-card/directives.js b/app/components/partials/widgets/destination-card/directives.js new file mode 100644 index 0000000000..420f1c49a8 --- /dev/null +++ b/app/components/partials/widgets/destination-card/directives.js @@ -0,0 +1,9 @@ +'use strict'; + +angular.module('destinationCardDirectives', []) + .directive('destinationCardList', function($rootScope){ + return { + restrict: 'E', + templateUrl: 'components/partials/widgets/destination-card/destination-card.html' + } + }); \ No newline at end of file diff --git a/app/components/partials/widgets/destination-card/template1.html b/app/components/partials/widgets/destination-card/template1.html new file mode 100644 index 0000000000..9ab5d647da --- /dev/null +++ b/app/components/partials/widgets/destination-card/template1.html @@ -0,0 +1,8 @@ +
+

{{cardData.title}}

+ + {{cardData.line1Text}}
+ {{cardData.line2Text}} + +
+ \ No newline at end of file diff --git a/app/components/partials/widgets/destination-card/template2.html b/app/components/partials/widgets/destination-card/template2.html new file mode 100644 index 0000000000..29f6919a84 --- /dev/null +++ b/app/components/partials/widgets/destination-card/template2.html @@ -0,0 +1,16 @@ +
+
+ +
+
+
+
+ {{cardData.cardTxtHeading}} + {{cardData.cardTxtSub}} +
+
+
+ +
+
+
\ No newline at end of file diff --git a/app/components/partials/widgets/destination-card/template3.html b/app/components/partials/widgets/destination-card/template3.html new file mode 100644 index 0000000000..761e5e50b0 --- /dev/null +++ b/app/components/partials/widgets/destination-card/template3.html @@ -0,0 +1,18 @@ +
+
+ +
+

Top 10 Australian beaches

+
+ +
+
+
+
{{cardData.title}}
+ + {{cardData.line1Text}}+ + {{cardData.line2Text}} + +
+ +
\ No newline at end of file diff --git a/app/components/partials/widgets/header/directives.js b/app/components/partials/widgets/header/directives.js new file mode 100644 index 0000000000..f07640cdc4 --- /dev/null +++ b/app/components/partials/widgets/header/directives.js @@ -0,0 +1,9 @@ +'use strict'; + +angular.module('headerDirective', []) + .directive('header', function($rootScope){ + return { + restrict: 'E', + templateUrl: 'components/partials/widgets/header/header.html' + } + }); \ No newline at end of file diff --git a/app/components/partials/widgets/header/header.html b/app/components/partials/widgets/header/header.html new file mode 100644 index 0000000000..4e491c642f --- /dev/null +++ b/app/components/partials/widgets/header/header.html @@ -0,0 +1,6 @@ + + diff --git a/app/components/partials/widgets/header/menuDesktop.html b/app/components/partials/widgets/header/menuDesktop.html new file mode 100644 index 0000000000..cab9c39284 --- /dev/null +++ b/app/components/partials/widgets/header/menuDesktop.html @@ -0,0 +1,10 @@ +
+ + {{menuItem.label}} + +
+ \ No newline at end of file diff --git a/app/index.html b/app/index.html index 3c4bb6b02e..56c24802f3 100644 --- a/app/index.html +++ b/app/index.html @@ -1,41 +1,32 @@ - - - - + My AngularJS App - + - - - +
-
Angular seed app: v
+ - + + diff --git a/app/view1/view1.html b/app/view1/view1.html index 89459a65ca..88ce6c18a7 100644 --- a/app/view1/view1.html +++ b/app/view1/view1.html @@ -1 +1,5 @@ -

This is the partial for view 1.

+
+
+ + + diff --git a/app/view1/view1.js b/app/view1/view1.js index 4ce0b4f118..4b3e3e67a6 100644 --- a/app/view1/view1.js +++ b/app/view1/view1.js @@ -5,10 +5,96 @@ angular.module('myApp.view1', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'view1/view1.html', - controller: 'View1Ctrl' + controller: 'View1Ctrl', + scope:true }); }]) -.controller('View1Ctrl', [function() { +.controller('View1Ctrl', ['$scope',function($scope) { + +$scope.header = { + title:"My Books", + listOfBooks:[ + { + label:"El Pooch", + url:"javascript:void(0);" + }, + { + label:"El Little Pooch", + url:"javascript:void(0);" + }, + { + label:"The Flight", + url:"javascript:void(0);" + }, + { + label:"Welcome To Beaches", + url:"javascript:void(0);" + } + ] +}; +$scope.dataCardList =[ + { + firstButtonLabel : "NO", + secondButtonLabel : "YES", + title:"Welcome back!", + line1Text : "Its been a while.", + line2Text : "Read any new boooks recently?", + version:"version1" + }, + { + firstButtonLabel : "FREE SAMPLE", + secondButtonLabel : "REVIEW", + cardTxtHeading : "El Pooch", + cardTxtSub : "By Alex Nelson", + src :"http://cdn1.bigcommerce.com/n-63unu/mzwlzs93/product_images/uploaded_images/tyson-pet-of-the-week.jpg?t=1453747722", + version:"version2" + }, + { + firstButtonLabel : "FREE SAMPLE", + secondButtonLabel : "REVIEW", + cardTxtHeading : "El Little Pooch", + cardTxtSub : "By Alex Nelson", + version:"version2", + src :"http://images.freeimages.com/images/premium/previews/1152/11525553-elf-dog.jpg" + }, + { + firstButtonLabel : "FREE SAMPLE", + secondButtonLabel : "REVIEW", + cardTxtHeading : "The Flight", + cardTxtSub : "By Jack London", + src :"http://www.usairnet.com/wp-content/uploads/2012/12/3702-A.jpg", + version:"version2" + } +]; +$scope.dataCardListCol2 =[ + { + firstButtonLabel : "SHARE", + secondButtonLabel : "EXPLORE", + imgTitle:"Welcome to Beaches", + title:"Number10", + line1Text : "Whitehaven Beach", + line2Text : "Whitehaven Beach, Whitehaven Beach", + version:"version3", + src :"http://point-shoot-dslr-camera-prices.com/wp-content/uploads/wppa/2651.jpg?ver=4" + } +]; +$scope.custom = true; +$scope.menuClass="hamburger"; +$scope.toggleHamburgerMenu = function(){ + $scope.custom = $scope.custom === false ? true: false; + var background = document.getElementById("destinationCard"); + if($scope.custom===false){ + $scope.menuClass = "hamburgerCross"; + background.style.opacity=0.3; + }else{ + $scope.menuClass = "hamburger"; + + background.style.opacity=1; + + } +}; + + }]); \ No newline at end of file diff --git a/app/view2/view2.html b/app/view2/view2.html deleted file mode 100644 index b6503ee11a..0000000000 --- a/app/view2/view2.html +++ /dev/null @@ -1,5 +0,0 @@ -

This is the partial for view 2.

-

- Showing of 'interpolate' filter: - {{ 'Current version is v%VERSION%.' | interpolate }} -

diff --git a/app/view2/view2.js b/app/view2/view2.js deleted file mode 100644 index a0ff97dbd7..0000000000 --- a/app/view2/view2.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -angular.module('myApp.view2', ['ngRoute']) - -.config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/view2', { - templateUrl: 'view2/view2.html', - controller: 'View2Ctrl' - }); -}]) - -.controller('View2Ctrl', [function() { - -}]); \ No newline at end of file diff --git a/app/view2/view2_test.js b/app/view2/view2_test.js deleted file mode 100644 index 07b34d6bb3..0000000000 --- a/app/view2/view2_test.js +++ /dev/null @@ -1,16 +0,0 @@ -'use strict'; - -describe('myApp.view2 module', function() { - - beforeEach(module('myApp.view2')); - - describe('view2 controller', function(){ - - it('should ....', inject(function($controller) { - //spec body - var view2Ctrl = $controller('View2Ctrl'); - expect(view2Ctrl).toBeDefined(); - })); - - }); -}); \ No newline at end of file