Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

created a responsive web application from angular seed #324

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+408 −76
Open

created a responsive web application from angular seed #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 186 additions & 20 deletions app/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

}


6 changes: 4 additions & 2 deletions app/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'});
Expand Down
4 changes: 4 additions & 0 deletions app/assets/ic_close_24px.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions app/assets/ic_menu_24px.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions app/components/partials/widgets/destination-card/btnPanel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="cardButtonPanel">
<span class="cardFirstBtnLbl">{{cardData.firstButtonLabel}}</span>
<span class="cardSecondBtnLbl">{{cardData.secondButtonLabel}}</span>
</div>
30 changes: 30 additions & 0 deletions app/components/partials/widgets/destination-card/destination-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<div id="destinationCard">
<div class="col1">
<section ng-repeat="cardData in dataCardList" class="{{cardData.version}}">
<div ng-switch on="cardData.version" >
<div ng-switch-when="version1">
<ng-include src="'components/partials/widgets/destination-card/template1.html'"></ng-include>
</div>
<div ng-switch-when="version2">
<ng-include src="'components/partials/widgets/destination-card/template2.html'"></ng-include>
</div>
<div ng-switch-default>
Error in data: Template version did not match.
</div>
</div>
</section>
</div>
<div class="col2">
<section ng-repeat="cardData in dataCardListCol2" class="{{cardData.version}}">
<div ng-switch on="cardData.version" >
<div ng-switch-when="version3">
<ng-include src="'components/partials/widgets/destination-card/template3.html'"></ng-include>
</div>
<div ng-switch-default>
Error in data: Template version did not match.
</div>
</div>
</section>
</div>

</div>
9 changes: 9 additions & 0 deletions app/components/partials/widgets/destination-card/directives.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
}
});
8 changes: 8 additions & 0 deletions app/components/partials/widgets/destination-card/template1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div class="cardTextDiv {{cardData.version}}">
<h1>{{cardData.title}}</h1>
<span>
{{cardData.line1Text}}<br>
{{cardData.line2Text}}
</span>
</div>
<ng-include src="'components/partials/widgets/destination-card/btnPanel.html'"></ng-include>
16 changes: 16 additions & 0 deletions app/components/partials/widgets/destination-card/template2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div class="flex-container-outer {{cardData.version}}">
<div class="flex-item flex-item1">
<img ng-src="{{cardData.src}}"/>
</div>
<div class="flex-container">
<div class="flex-item flex-item2 upper">
<div class="cardTextDivV2">
<span class="cardTxtHeading">{{cardData.cardTxtHeading}}</span>
<span class="cardTxtSub">{{cardData.cardTxtSub}}</span>
</div>
</div>
<div class="flex-item flex-item2 lower">
<ng-include src="'components/partials/widgets/destination-card/btnPanel.html'"></ng-include>
</div>
</div>
</div>
18 changes: 18 additions & 0 deletions app/components/partials/widgets/destination-card/template3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class=" {{cardData.version}}">
<div class="cardDataImgVersion3">
<img class="xyz" src="http://point-shoot-dslr-camera-prices.com/wp-content/uploads/wppa/2651.jpg?ver=4">
<div class="xyzText">
<p>Top 10 Australian beaches</p>
</div>
</img>
</div>
<div>
<div class="cardTextDiv">
<div class="cardTxtSub">{{cardData.title}}</div>
<span>
{{cardData.line1Text}}+
{{cardData.line2Text}}
</span>
</div>
<ng-include src="'components/partials/widgets/destination-card/btnPanel.html'"></ng-include>
</div>
9 changes: 9 additions & 0 deletions app/components/partials/widgets/header/directives.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
'use strict';

angular.module('headerDirective', [])
.directive('header', function($rootScope){
return {
restrict: 'E',
templateUrl: 'components/partials/widgets/header/header.html'
}
});
6 changes: 6 additions & 0 deletions app/components/partials/widgets/header/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div id="header">
<div id="menuBtn" ng-class="menuClass" ng-click="toggleHamburgerMenu()"></div>
<div class="headerText">{{header.title}}</div>
<ng-include src="'components/partials/widgets/header/menuDesktop.html'"></ng-include>
</div>

10 changes: 10 additions & 0 deletions app/components/partials/widgets/header/menuDesktop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<div ng-hide="custom" class="menuMobile" >
<a ng-repeat="menuItem in header.listOfBooks" class="menuItemsMobile" ng-href="'{{menuItem.url}}'">
{{menuItem.label}}
</a>
</div>
<div id="menu" class="menuDesktop" >
<a ng-repeat="menuItem in header.listOfBooks" class="menuItemsDesktop" ng-href="'{{menuItem.url}}'">
{{menuItem.label}}
</a>
</div>
Loading