From 3eaf116dcd73cf8d85bb5ece978ea39de401f865 Mon Sep 17 00:00:00 2001 From: Mamta Yadav Date: Tue, 6 Jun 2017 15:53:21 +0530 Subject: [PATCH 01/13] change in header css --- src/app/components/shared/header/header.component.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/components/shared/header/header.component.css b/src/app/components/shared/header/header.component.css index fea200e..34fd347 100644 --- a/src/app/components/shared/header/header.component.css +++ b/src/app/components/shared/header/header.component.css @@ -4,7 +4,6 @@ position: relative; } .constraintWidth { - max-width: 1100px; padding: 0 15px; box-sizing: border-box; margin: 0 auto; From 628358209e24bbe91b538376b9463466fd7d9820 Mon Sep 17 00:00:00 2001 From: Mamta Yadav Date: Tue, 6 Jun 2017 16:56:41 +0530 Subject: [PATCH 02/13] change in header css --- .../shared/header/header.component.css | 51 +++++++++--------- .../shared/header/header.component.html | 52 ++++++++++++++++++- .../profile-dropdown.component.html | 4 +- src/app/container/app.component.css | 2 - 4 files changed, 77 insertions(+), 32 deletions(-) diff --git a/src/app/components/shared/header/header.component.css b/src/app/components/shared/header/header.component.css index 34fd347..699668c 100644 --- a/src/app/components/shared/header/header.component.css +++ b/src/app/components/shared/header/header.component.css @@ -5,30 +5,28 @@ } .constraintWidth { padding: 0 15px; - box-sizing: border-box; - margin: 0 auto; - min-width: 320px; - + box-sizing: border-box;a + margin: 0 auto; } .content { display: -ms-flexbox; display: flex; - padding: 15px 0; - position: relative; - height: 32px; - justify-content: space-between; - -ms-flex-pack: justify; + padding: 15px 0; + position: relative; + height: 32px; + justify-content: space-between; + -ms-flex-pack: justify; } /*---------------LEFT SIDE--------------------*/ .leftside { ms-flex-align: center; - align-items: center; - -ms-flex-pack: start; - justify-content: flex-start; - display: -ms-flexbox; - display: flex; + align-items: center; + -ms-flex-pack: start; + justify-content: flex-start; + display: -ms-flexbox; + display: flex; } .logo { @@ -132,7 +130,6 @@ } .logged-in-user-area{ - width: 200px; float: left; } @@ -199,7 +196,7 @@ } .signup:hover { - background: #ea532a; + background: #ea532a; border-color: #ea532a; cursor: pointer; } @@ -207,14 +204,14 @@ .buttoncontainer { -ms-flex-align: center; - align-items: center; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -ms-flex-pack: center; - justify-content: center; - width: inherit; + align-items: center; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -ms-flex-pack: center; + justify-content: center; + width: inherit; } .overlayInactive { @@ -222,9 +219,9 @@ } .avatar { - border-radius: 50%; - height: 32px; - width: 32px; + border-radius: 50%; + height: 32px; + width: 32px; } @media only screen and (min-width: 769px) { diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html index 5100ac8..eb1b2c5 100644 --- a/src/app/components/shared/header/header.component.html +++ b/src/app/components/shared/header/header.component.html @@ -55,7 +55,57 @@ product hunt icon
- + + +
+ +
diff --git a/src/app/components/shared/header/profile-dropdown/profile-dropdown.component.html b/src/app/components/shared/header/profile-dropdown/profile-dropdown.component.html index 0750242..d0870a2 100644 --- a/src/app/components/shared/header/profile-dropdown/profile-dropdown.component.html +++ b/src/app/components/shared/header/profile-dropdown/profile-dropdown.component.html @@ -1,4 +1,4 @@ -
+ avatar @@ -13,4 +13,4 @@
  • Logout
    • -
    \ No newline at end of file + \ No newline at end of file diff --git a/src/app/container/app.component.css b/src/app/container/app.component.css index 77368d0..2e936a8 100644 --- a/src/app/container/app.component.css +++ b/src/app/container/app.component.css @@ -3,7 +3,6 @@ } .constraintWidth-conainer-content { - max-width: 1100px; -ms-flex-flow: row nowrap; flex-flow: row nowrap; display: -ms-flexbox; @@ -14,7 +13,6 @@ padding: 0 15px; box-sizing: border-box; margin: 0 auto; - min-width: 320px; } @media only screen and (max-width: 768px) { From 16ca8decf12d17ac69f0c71e812b039fc6204409 Mon Sep 17 00:00:00 2001 From: Mamta Yadav Date: Mon, 12 Jun 2017 19:03:48 +0530 Subject: [PATCH 03/13] css for iPhone 5 and iPhone6 --- .../components/project/project.component.css | 159 +++++++++-- .../components/project/project.component.html | 4 +- .../shared/header/header.component.css | 268 +++++++++++------- .../shared/header/header.component.html | 98 ++++--- .../shared/modal/modal.component.css | 6 + src/styles.css | 8 + 6 files changed, 384 insertions(+), 159 deletions(-) diff --git a/src/app/components/project/project.component.css b/src/app/components/project/project.component.css index 27c01d4..0f76785 100644 --- a/src/app/components/project/project.component.css +++ b/src/app/components/project/project.component.css @@ -3,7 +3,7 @@ border: 1px solid #e8e8e8; min-width: 0; width:702px; - } +} .top { position: relative; @@ -19,35 +19,34 @@ } .canvas ol { - display: flex; - list-style: none; - margin: 0; - padding: 0; - overflow-x: scroll; - overflow-y: hidden; - position: relative; - } + display: flex; + list-style: none; + margin: 0; + padding: 0; + overflow-x: scroll; + overflow-y: hidden; + position: relative; +} .canvas li { - height: 360px; - display: -ms-flexbox; - display: flex; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - margin: 0 10px 20px 0; - } + height: 360px; + display: -ms-flexbox; + display: flex; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + margin: 0 10px 20px 0; +} - .container-text { - position: relative; - height: 360px; - width: 202.759px + position: relative; + height: 360px; + width: 202.759px } .thumbsnails { - margin-left: 40px !important; - display: -ms-flexbox !important; - display: flex !important; + margin-left: 40px !important; + display: -ms-flexbox !important; + display: flex !important; } .thumbnail_u { @@ -57,7 +56,6 @@ margin-right: 10px; } - .timestamp { bottom: 0; padding: 5px; @@ -264,4 +262,117 @@ share-buttons { padding: 10px; width: 155px; padding: 0px; +} + +@media only screen and (max-width: 414px) { + .image-div { + height: 300px; + width: 375px; + } + + .image-canvas { + height: 100%; + width: 100%; + object-fit: cover; + } + + .canvas { + height: 310px; + } + + .information-section { + margin: 20px; + width: 49%; + } + + .thumbnail-4 { + margin-right: 20px; + } + + .tagline-text { + height: 40px; + overflow: hidden; + margin-bottom: 10px; + } + + .headline-base { + font-size: 24px; + } + + .tagline-heading { + font-size: 15px; + } + .action-section { + padding: 10px 0; + } + .action-inner { + margin: 0 15px; + } + .share-buttons { + width: 30px; + } + .inactiveLink a { + padding: 0 4px; + } + .inactivePopoverToggle { + width: 15px; + } + share-buttons { + width: 70px; + } + .button_mediumSize { + padding: 0 5px; + } +} + +@media only screen and (max-width: 320px) { + .image-div { + width: 312px; + height: 280px; + } + + .canvas { + height: 300px; + } + + .information-section { + margin: 10px; + width: 45%; + } + + .headline-base { + font-size: 20px; + } + + .headline_content { + margin: 0 0 5px; + } + + .thumbnail-4 { + margin-right: 15px; + } + .tagline-heading[_ngcontent-c10] { + font-size: 13px; + } + .action-inner { + margin: 0 5px; + } + .comboButton { + margin: 0 5px 0 0; + } + .inactivePopoverToggle { + visibility: hidden; + } + .ion-android-menu { + visibility: hidden; + } + .ion-android-add { + visibility: hidden; + } + .action-inner main { + margin-right: -16px + } + collectButtonLabel { + margin-left: -2px; + } } \ No newline at end of file diff --git a/src/app/components/project/project.component.html b/src/app/components/project/project.component.html index 096c64d..655a3e6 100644 --- a/src/app/components/project/project.component.html +++ b/src/app/components/project/project.component.html @@ -3,9 +3,9 @@
    -
    +
    - +
    diff --git a/src/app/components/shared/header/header.component.css b/src/app/components/shared/header/header.component.css index 699668c..3b83b3a 100644 --- a/src/app/components/shared/header/header.component.css +++ b/src/app/components/shared/header/header.component.css @@ -1,7 +1,7 @@ .header { background: #fff; - border-bottom: 1px solid #e8e8e8; - position: relative; + border-bottom: 1px solid #e8e8e8; + position: relative; } .constraintWidth { padding: 0 15px; @@ -30,39 +30,39 @@ } .logo { - margin: 0 10px 0 0; + margin: 0 10px 0 0; } .name { display: block; position: relative; - top: 1px; - text-decoration: none; + top: 1px; + text-decoration: none; } .name strong { color: #da552f; - display: block; - font-size: 18px; - font-weight: 600; - line-height: 18px; + display: block; + font-size: 18px; + font-weight: 600; + line-height: 18px; } .name span { display: block; - margin-top: 2px; - font-size: 13px; - color: #999; + margin-top: 2px; + font-size: 13px; + color: #999; } /*-----------------CENTER PART----------------*/ .container { left: 50%; - margin-left: -150px; - position: absolute; - top: 16px; - width: 280px; + margin-left: -150px; + position: absolute; + top: 16px; + width: 280px; } .form { @@ -73,60 +73,59 @@ .text { font-size: 14px; - font-weight: 400; - line-height: 18px; - color: #999; - margin: 0; + font-weight: 400; + line-height: 18px; + color: #999; + margin: 0; } .ion-ios-search { fill: #999; - font-size: 18px; - left: 8px; - position: absolute; - top: 8px; - + font-size: 18px; + left: 8px; + position: absolute; + top: 8px; } .input { - color: #999; - border: 1px solid #e8e8e8; - border-radius: 3px; - background: #fff; - height: 25px; - padding: 2px 10px 0 32px; - width: 100%; + color: #999; + border: 1px solid #e8e8e8; + border-radius: 3px; + background: #fff; + height: 25px; + padding: 2px 10px 0 32px; + width: 100%; } /*-------------------------------RIGHT SIDE----------------------*/ .rightside { display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: end; - justify-content: flex-end; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: end; + justify-content: flex-end; } .ion-ios-more { text-align: center; - -ms-flex-align: center; - align-items: center; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-pack: center; - justify-content: center; - height: 32px; - width: 32px; + -ms-flex-align: center; + align-items: center; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-pack: center; + justify-content: center; + height: 32px; + width: 32px; } .divider { color: #e8e8e8; - margin-left: 13px; - border-left: 1px solid #e8e8e8; - height: 13px; - width: 3px; + margin-left: 13px; + border-left: 1px solid #e8e8e8; + height: 13px; + width: 3px; } .logged-in-user-area{ @@ -141,58 +140,58 @@ .login { height: 30px; - margin-left: 5px; - background: #fff; - border-color: #e8e8e8; - color: #000; - fill: #000; - padding: 0 13px; - font-weight: 600; - font-size: 12px; - line-height: 16px; - text-transform: uppercase; - border-radius: 3px; - border: 1px solid transparent; - box-sizing: border-box; - outline: 0; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - text-decoration: none !important; - border: 1px solid #e8e8e8; + margin-left: 5px; + background: #fff; + border-color: #e8e8e8; + color: #000; + fill: #000; + padding: 0 13px; + font-weight: 600; + font-size: 12px; + line-height: 16px; + text-transform: uppercase; + border-radius: 3px; + border: 1px solid transparent; + box-sizing: border-box; + outline: 0; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + text-decoration: none !important; + border: 1px solid #e8e8e8; } .signup { - height: 30px; - margin-left: 5px; - background: #da552f; - border-color: #da552f; - color: #fff; - fill: #fff; - padding: 0 13px; - border-radius: 3px; - border: 1px solid transparent; - box-sizing: border-box; - outline: 0; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - text-decoration: none !important; - font-weight: 600; - font-size: 12px; - /*font-weight: 400;*/ - letter-spacing: .6px; - line-height: 16px; - text-transform: uppercase; + height: 30px; + margin-left: 5px; + background: #da552f; + border-color: #da552f; + color: #fff; + fill: #fff; + padding: 0 13px; + border-radius: 3px; + border: 1px solid transparent; + box-sizing: border-box; + outline: 0; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + text-decoration: none !important; + font-weight: 600; + font-size: 12px; + /*font-weight: 400;*/ + letter-spacing: .6px; + line-height: 16px; + text-transform: uppercase; } .signup:hover { @@ -274,7 +273,7 @@ top: 7px; } - .ion-ios-search-strong{ + .ion-ios-search-strong { color: #999; font-size: 20px; height: 14px; @@ -291,5 +290,78 @@ } } +@media only screen and (max-width: 414px) { + /*.input { + width: 80%; + border: none; + font-size: 16px; + }*/ + /*.menu-button { + border: 1px solid #e8e8e8; + border-top: none; + }*/ + /*.menu-button-mobile { + list-style: none; + } + .menu-screen { + text-decoration: none; + color: black; + font-size: 13px; + } + .close-button { + border: none; + background-color: white; + font-size: 25px; + font-weight: 600; + float: right; + margin-top: -409px; + } + .menu-mobile { + padding: 20px 0px; + } + .ion-ios-search-strong { + padding: 0; + margin-top: 10px; + padding-left: 5px; + }*/ +} + +.boxarrow { + background: #fff; + border-radius: 5px; + border: 1px solid #e8e8e8; + width: 140px; + position: absolute; + right: 0; + z-index: 1; + display: none; +} + +.mobile-content-mobile { + list-style: none; + font-weight: 600; + font-size: 11px; + letter-spacing: .3px; + line-height: 16px; + text-transform: uppercase; + padding: 0; + margin: 15px 20px; +} +.option-mobile { + padding-bottom: 15px; +} +.small-screen { + color: #999; + text-decoration: none; +} +.separator-bar { + background: #e8e8e8; + border: 0; + height: 1px; + margin: -5px 0; +} + + + diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html index eb1b2c5..91e90f8 100644 --- a/src/app/components/shared/header/header.component.html +++ b/src/app/components/shared/header/header.component.html @@ -48,7 +48,6 @@
    -
    \ No newline at end of file diff --git a/src/app/components/shared/modal/modal.component.css b/src/app/components/shared/modal/modal.component.css index 1d407b2..7768646 100644 --- a/src/app/components/shared/modal/modal.component.css +++ b/src/app/components/shared/modal/modal.component.css @@ -498,3 +498,9 @@ hr { position: relative; } +@media only screen and (max-width: 414px) { + .modal-dialog { + width: 96%; + } +} + diff --git a/src/styles.css b/src/styles.css index 5dcbf4a..10a66f6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -31,4 +31,12 @@ share-buttons .sb-buttons .twitter button { background: #00b4f5; border-color: #00b4f5; color: white; +} + + +@media only screen and (max-width: 414px) { + share-buttons button { + width: 30px; + } + } \ No newline at end of file From a70791a3ba75a3194dc7fba782ea25b0e43b90c5 Mon Sep 17 00:00:00 2001 From: Mamta Yadav Date: Mon, 12 Jun 2017 19:19:34 +0530 Subject: [PATCH 04/13] change in css --- src/app/components/project/project.component.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/components/project/project.component.css b/src/app/components/project/project.component.css index 0f76785..fc052ba 100644 --- a/src/app/components/project/project.component.css +++ b/src/app/components/project/project.component.css @@ -351,26 +351,26 @@ share-buttons { .thumbnail-4 { margin-right: 15px; } + .tagline-heading[_ngcontent-c10] { font-size: 13px; } + .action-inner { margin: 0 5px; } + .comboButton { margin: 0 5px 0 0; } + .inactivePopoverToggle { visibility: hidden; } - .ion-android-menu { - visibility: hidden; - } - .ion-android-add { - visibility: hidden; - } + .action-inner main { margin-right: -16px + } collectButtonLabel { margin-left: -2px; From d5e419e6c14b9ea981621119ca5d5f6768d0ff1d Mon Sep 17 00:00:00 2001 From: Mamta Yadav Date: Tue, 13 Jun 2017 12:49:51 +0530 Subject: [PATCH 05/13] change in css --- src/app/components/project/project.component.css | 6 ++++++ src/app/components/project/project.component.html | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/components/project/project.component.css b/src/app/components/project/project.component.css index fc052ba..32bcdb2 100644 --- a/src/app/components/project/project.component.css +++ b/src/app/components/project/project.component.css @@ -375,4 +375,10 @@ share-buttons { collectButtonLabel { margin-left: -2px; } + share-buttons { + width: 67px; + } + .button_icon { + visibility: hidden; + } } \ No newline at end of file diff --git a/src/app/components/project/project.component.html b/src/app/components/project/project.component.html index 655a3e6..9043cf2 100644 --- a/src/app/components/project/project.component.html +++ b/src/app/components/project/project.component.html @@ -92,7 +92,7 @@

    {{ project.description }}

    - - + + \ No newline at end of file From abec0b017def15d59bc3e288ea54eea5b6385b62 Mon Sep 17 00:00:00 2001 From: Mamta Yadav Date: Thu, 22 Jun 2017 19:34:35 +0530 Subject: [PATCH 09/13] made project modal responsive --- .../components/project/project.component.css | 656 +++++++++--------- .../components/project/project.component.html | 2 +- .../shared/modal/modal.component.css | 19 +- .../project-detail-page.component.css | 4 + .../project-detail-page.component.html | 2 +- src/styles.css | 14 +- 6 files changed, 347 insertions(+), 350 deletions(-) diff --git a/src/app/components/project/project.component.css b/src/app/components/project/project.component.css index a46cbc0..a85d811 100644 --- a/src/app/components/project/project.component.css +++ b/src/app/components/project/project.component.css @@ -1,8 +1,7 @@ .main { background-color: #fff; border: 1px solid #e8e8e8; - min-width: 0; - width:702px; + font-size: 15px; } .top { @@ -57,11 +56,9 @@ } .timestamp { - bottom: 0; padding: 5px; position: absolute; - right: 30px; - text-align: right; + right: 280px; } .secondaryText-base { @@ -159,15 +156,10 @@ text-decoration: none!important; } -.action-section { - border-top: 1px solid #e8e8e8; - border-bottom: 1px solid #e8e8e8; - padding: 20px 0; -} - .action-inner { + width: 80%; + margin: 0 auto; display: flex; - margin: 0 40px; } .action-section a { @@ -177,12 +169,12 @@ .comboButton { display: inline-block; position: relative; - margin: 0 10px 0 0; + margin: 0 25px 0 0; } .secondaryBoldText { font-weight: 600; - font-size: 12px; + font-size: 17px; letter-spacing: .6px; line-height: 16px; text-transform: uppercase; @@ -191,14 +183,14 @@ .inactiveLink { background: #da552f; display: inline-block; - height: 34px; + height: 35px; line-height: 34px; box-sizing: border-box; border-radius: 3px 0 0 3px; } .inactiveLink a { - padding: 0 12px; + padding: 0 20px; color: #fff; } @@ -207,12 +199,11 @@ border-left: 1px solid #fff; /*cursor: pointer;*/ text-align: center; - width: 28px; + width: 40px; background: #da552f; color: #fff; display: inline-block; - height: 34px; - line-height: 34px; + line-height: 33px; box-sizing: border-box; margin-left: -4px; } @@ -224,7 +215,7 @@ .button_mediumSize { background: #fff; color: #000; - height: 34px; + height: 35px; padding: 0 13px; border-radius: 3px; border: 1px solid #e8e8e8; @@ -234,7 +225,7 @@ text-align: center; text-decoration: none!important; font-weight: 600; - font-size: 12px; + font-size: 17px; letter-spacing: .6px; line-height: 16px; text-transform: uppercase; @@ -260,257 +251,10 @@ a { share-buttons { float: left; padding: 10px; - width: 155px; + width: 210px; padding: 0px; } -@media only screen and (max-width: 320px) { - .image-div { - width: 100vw; - height: 280px; - } - - .image-canvas { - width: 100%; - height: 100%; - object-fit: cover; - } - - .canvas { - height: 300px; - } - - .information-section { - margin: 10px; - width: 45%; - } - - .headline-base { - font-size: 20px; - } - - .headline_content { - margin: 0 0 5px; - } - - .thumbnail-4 { - margin-right: 15px; - } - - .tagline-heading { - font-size: 13px; - height: 40px; - overflow: hidden; - } - .action-inner { - margin: 0 5px; - } - - .comboButton { - margin: 0 -8px 0 0; - } - - .inactivePopoverToggle { - visibility: hidden; - } - - .action-inner main { - margin-right: -16px - } - - collectButtonLabel { - margin-left: -2px; - } - - share-buttons { - width: 67px; - } - .button_icon { - visibility: hidden; - } - .inactiveLink a { - padding: 0 4px; - margin: 0 3px; - } - - .button-add-label { - padding: 0 7px; - } -} - -@media only screen and (min-width: 321px) and (max-width: 480px) { - - .canvas { - height: 310px; - } - - .image-div { - height: 100%; - width: 100vw; - } - - .image-canvas { - height: 100%; - width: 100%; - object-fit: cover; - } - - .information-section { - width: 49%; - } - - .thumbnail-4 { - margin-right: 20px; - } - - .tagline-text { - height: 40px; - overflow: hidden; - margin-bottom: 10px; - } - - .headline-base { - font-size: 24px; - } - - .tagline-heading { - font-size: 15px; - } - - .action-section { - padding: 10px 0; - } - - .action-inner { - margin: 0 7px; - } - - .inactiveLink a { - padding: 0 4px; - margin: 0 4px; - } - - .inactivePopoverToggle { - width: 23px; - } - - share-buttons { - width: 68px; - } - - .button-add-label { - padding: 0 10px; - margin-left: 6px; - } - - .button-icon { - padding: 0 2px; - } - - .ion-arrow-up-b { - margin-left: 1px; - } - - .collectButtonLabel { - margin-left: -4px; - } - -} - -@media only screen and (min-width: 481px) and (max-width: 767px) { - .headline-base { - font-size: 25px; - } - - .tagline-heading { - font-size: 15px; - height: 40px; - overflow: hidden; - } - - .image-div { - width: 100vw; - } - - .image-canvas { - height: 100%; - width: 100%; - } - -} - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .image-div { - width: 63vw; - height: 100%; - } - - .image-canvas { - height: 100%; - width: 100%; - object-fit: cover; - } - - .tagline-heading { - height: 40px; - overflow: hidden; - font-size: 15px; - } - - .action-inner { - margin: 0 10px; - } - - share-buttons { - width: 98px; - } - -} - -@media only screen and (min-width: 1024px) { - .main { - width: auto; - font-size: 15px; - } - - .action-inner { - margin: 0 125px; - } - - .comboButton { - margin: 0 20px 0 0; - } - - .secondaryBoldText { - font-size: 15px; - } - - .inactiveLink a { - padding: 0 20px; - } - - .inactivePopoverToggle { - width: 40px; - } - - share-buttons { - width: 205px; - } - - .button-add-label { - padding: 0 35px; - font-size: 15px; - } - - .buttonContainer { - font-size: 15px; - } - - .button-icon { - padding: 0 35px; - } -} - /* Comment Section CSS and its Media Queries here*/ @@ -518,7 +262,6 @@ share-buttons { border: 1px solid #e8e8e8; margin-top: 20px; border-radius: 3px; - max-width: 800px; background-color: #fff; } @@ -711,18 +454,14 @@ share-buttons { margin: 0 5px 0 0; } -.timestamp { +.timestamphere { text-decoration: none; display: inline-block; color: #c9c9c9; - bottom: 0; - padding: 5px; - position: absolute; - right: 45px; - text-align: right; + margin: 0 0 10px 20px; } -.timestamp:hover { +.timestamphere:hover { text-decoration: underline; } @@ -742,89 +481,334 @@ share-buttons { } .show-more-comments-container:hover { - background: #e8e8e8; + background: #e8e8e8; } -@media only screen and (max-width: 320px) { - - .comment-part { +/*@media only screen and (max-width: 320px) { + .image-div { width: 100vw; + height: 280px; } - .wrapper { - padding: 0 10px; + + .image-canvas { + width: 100%; + height: 100%; + object-fit: cover; } - .item { - margin-right: 0; + + .canvas { + height: 300px; } - .user-image { - margin: 0 10px 0 0; + + .information-section { + margin: 10px; + width: 45%; } - .userName_text { - margin-left: 0; - margin-right: 5px; + + .headline-base { + font-size: 20px; } - .heading-title { - font-size: 13px; - margin: 0 0 15px; + + .headline_content { + margin: 0 0 5px; } - .boldtext_heading { - font-size: 13px; + + .thumbnail-4 { + margin-right: 15px; } - .text_subtle_base { + + .tagline-heading { font-size: 13px; + height: 40px; overflow: hidden; - margin-top: 2px; } - .show-more-body-text { - font-size: 13px; + .action-inner { + margin: 0 5px; + } + + .comboButton { + margin: 0 -8px 0 0; + } + + .inactivePopoverToggle { + visibility: hidden; + } + + .action-inner main { + margin-right: -16px + } + + collectButtonLabel { + margin-left: -2px; + } + + share-buttons { + width: 67px; } - .timestamp { + .button_icon { visibility: hidden; } - .show-more-comments-container { - width: 95%; - height: 30px + .inactiveLink a { + padding: 0 4px; + margin: 0 3px; + } + + .button-add-label { + padding: 0 7px; } } @media only screen and (min-width: 321px) and (max-width: 480px) { - .comment-part { - width: 100vw; - } - .wrapper { - padding: 0 15px; - } - .userName_text { - margin-left: 0; - } - .heading-title { - font-size: 13px; - } - .boldtext_heading { - font-size: 13px; - } - .text_subtle_base { - font-size: 13px; - overflow: hidden; - margin-top: 2px; - } - .show-more-body-text { - font-size: 13px; - } - .timestamp { - visibility: hidden; - } - .show-more-comments-container { - width: 95%; - height: 35px; - } + .canvas { + height: 310px; + } + + .image-div { + height: 100%; + width: 100vw; + } + + .image-canvas { + height: 100%; + width: 100%; + object-fit: cover; + } + + .information-section { + width: 49%; + } + + .thumbnail-4 { + margin-right: 20px; + } + + .tagline-text { + height: 40px; + overflow: hidden; + margin-bottom: 10px; + } + + .headline-base { + font-size: 24px; + } + + .tagline-heading { + font-size: 15px; + } + + .action-section { + padding: 10px 0; + } + + .action-inner { + margin: 0 7px; + } + + .inactiveLink a { + padding: 0 4px; + margin: 0 4px; + } + + .inactivePopoverToggle { + width: 23px; + } + + share-buttons { + width: 68px; + } + + .button-add-label { + padding: 0 10px; + margin-left: 6px; + } + + .button-icon { + padding: 0 2px; + } + + .ion-arrow-up-b { + margin-left: 1px; + } + + .collectButtonLabel { + margin-left: -4px; + } + } @media only screen and (min-width: 481px) and (max-width: 767px) { - .comment-part { - width: 100vw; - } + .headline-base { + font-size: 25px; + } + + .tagline-heading { + font-size: 15px; + height: 40px; + overflow: hidden; + } + + .image-div { + width: 100vw; + } + + .image-canvas { + height: 100%; + width: 100%; + } + +}*/ + +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .image-div { + height: 360px; + } + .image-canvas { + height: 100%; + width: 100%; + object-fit: cover; + } + .action-inner { + width: 90%; + } + .action-inner main { + width: 33%; + } + .comboButton { + float: right; + margin: 0 8% 0 0; + } + .action-inner aside { + width: 66%; + } + + share-buttons { + width: 103px; + } +} + +@media only screen and (min-width: 481px) and (max-width: 767px) { + .image-div { + height: 360px; + } + .image-canvas { + height: 100%; + width: 100%; + object-fit: cover; + } + .headline-base { + font-size: 26px; + } + .tagline-heading { + height: 40px; + overflow: hidden; + font-size: 15px; + } + .action-section a { + margin: 0; + } + .action-inner { + width: 96%; + } + .action-inner main { + width: 30%; + } + .action-inner aside { + width: 70%; + } + .inactivePopoverToggle { + width: 25px; + line-height: 34px; + } + .inactiveLink a { + padding: 0 10px; + } + .comboButton { + float: right; + margin: 0 10% 0 0; + } + .secondaryBoldText { + font-size: 11px; + } + .button_mediumSize { + font-size: 11px; + padding: 0 10px; + } + share-buttons { + width: 73px; + } + .boldtext_heading { + font-size: 14px; + } + .text_subtle_base { + font-size: 14px; + } + .show-more-body-text { + font-size: 14px; + } + .timestamphere { + margin: 0 0 10px 10px; + } } +@media only screen and (min-width: 0) and (max-width: 480px){ + .image-div { + height: 360px; + } + .image-canvas { + height: 100%; + width: 100%; + object-fit: cover; + } + .headline-base { + font-size: 26px; + } + .tagline-heading { + height: 40px; + overflow: hidden; + font-size: 15px; + } + .action-section a { + margin: 0; + } + .action-inner { + width: 96%; + } + .action-inner main { + width: 30%; + } + .action-inner aside { + width: 70%; + } + .inactivePopoverToggle { + width: 25px; + line-height: 34px; + } + .inactiveLink a { + padding: 0 10px; + } + .comboButton { + float: right; + margin: 0 10% 0 0; + } + .secondaryBoldText { + font-size: 11px; + } + .button_mediumSize { + font-size: 11px; + padding: 0 10px; + } + share-buttons { + width: 73px; + } + +} + + + + + + + + diff --git a/src/app/components/project/project.component.html b/src/app/components/project/project.component.html index a6a25d8..55b72a0 100644 --- a/src/app/components/project/project.component.html +++ b/src/app/components/project/project.component.html @@ -161,7 +161,7 @@

    discussion

    - + . 11 days ago diff --git a/src/app/components/shared/modal/modal.component.css b/src/app/components/shared/modal/modal.component.css index 7768646..35b9849 100644 --- a/src/app/components/shared/modal/modal.component.css +++ b/src/app/components/shared/modal/modal.component.css @@ -398,7 +398,7 @@ hr { height: 50px; overflow: scroll; } -@media (min-width: 500px) { +/*@media (min-width: 500px) { .modal-dialog { width: 500px; margin: 30px auto; @@ -410,13 +410,13 @@ hr { .modal-sm { width: 300px; } -} +}*/ -@media (min-width: 992px) { +/*@media (min-width: 992px) { .modal-lg { width: 100%; } -} +}*/ .clearfix:before, .clearfix:after, .modal-header:before, @@ -498,9 +498,12 @@ hr { position: relative; } -@media only screen and (max-width: 414px) { +@media only screen and (min-width: 768px) and (max-width: 1024px) { .modal-dialog { - width: 96%; - } -} + width: 90vw; + margin: 20px 5vw; + } +} + + diff --git a/src/app/container/project-detail-page/project-detail-page.component.css b/src/app/container/project-detail-page/project-detail-page.component.css index e69de29..7f588d4 100644 --- a/src/app/container/project-detail-page/project-detail-page.component.css +++ b/src/app/container/project-detail-page/project-detail-page.component.css @@ -0,0 +1,4 @@ + +.app-project-component { + width: 100%; +} \ No newline at end of file diff --git a/src/app/container/project-detail-page/project-detail-page.component.html b/src/app/container/project-detail-page/project-detail-page.component.html index 42d7fe2..1a9de14 100644 --- a/src/app/container/project-detail-page/project-detail-page.component.html +++ b/src/app/container/project-detail-page/project-detail-page.component.html @@ -1,5 +1,5 @@ - diff --git a/src/styles.css b/src/styles.css index ae3236a..508a8e1 100644 --- a/src/styles.css +++ b/src/styles.css @@ -34,9 +34,9 @@ share-buttons .sb-buttons .twitter button { } -@media only screen and (max-width: 414px) { +@media only screen and (min-width: 1024px) { share-buttons button { - width: 30px; + width: 90px; } } @@ -46,8 +46,14 @@ share-buttons .sb-buttons .twitter button { } } -@media only screen and (min-width: 1024px) { +@media only screen and (min-width: 481px) and (max-width: 767px){ share-buttons button { - width: 90px; + width: 30px; + } +} + +@media only screen and (min-width: 0) and (max-width: 480px) { + share-buttons button { + width: 30px; } } \ No newline at end of file From bb8db8a1559c54a59f9f466fe85bc7bce67f42a3 Mon Sep 17 00:00:00 2001 From: Mamta Yadav Date: Fri, 23 Jun 2017 15:44:07 +0530 Subject: [PATCH 10/13] responsive for iPhone5 --- .../components/project/project.component.css | 56 +++++++++++++------ .../components/project/project.component.html | 10 ++-- .../shared/modal/modal.component.css | 14 +++++ src/styles.css | 2 +- 4 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/app/components/project/project.component.css b/src/app/components/project/project.component.css index a85d811..d167e86 100644 --- a/src/app/components/project/project.component.css +++ b/src/app/components/project/project.component.css @@ -737,13 +737,7 @@ share-buttons { share-buttons { width: 73px; } - .boldtext_heading { - font-size: 14px; - } - .text_subtle_base { - font-size: 14px; - } - .show-more-body-text { + .remaining-text { font-size: 14px; } .timestamphere { @@ -760,8 +754,11 @@ share-buttons { width: 100%; object-fit: cover; } + .information-section { + margin: 30px 10px; + } .headline-base { - font-size: 26px; + font-size: 20px; } .tagline-heading { height: 40px; @@ -772,37 +769,62 @@ share-buttons { margin: 0; } .action-inner { - width: 96%; + width: 100%; } .action-inner main { - width: 30%; + width: 29%; } .action-inner aside { - width: 70%; + width: 71%; } .inactivePopoverToggle { - width: 25px; + width: 12px; line-height: 34px; } .inactiveLink a { - padding: 0 10px; + padding: 0 4px; } .comboButton { float: right; - margin: 0 10% 0 0; + margin: 0 5% 0 0; } .secondaryBoldText { font-size: 11px; } .button_mediumSize { font-size: 11px; - padding: 0 10px; + padding: 0 3px; } share-buttons { - width: 73px; + width: 60px; + } + .main-icons { + display: none; + } + .wrapper { + padding: 0 10px; + } + .item { + margin-right: 10px; + } + .user-image { + margin: 0 10px 0 0; + } + .userName_text { + margin-left: 0; + font-size: 12px; + } + .remaining-text { + font-size: 14px; + } + .timestamphere { + margin: 0 0 10px 10px; } +} + -} + + diff --git a/src/app/components/project/project.component.html b/src/app/components/project/project.component.html index 55b72a0..42ea7bc 100644 --- a/src/app/components/project/project.component.html +++ b/src/app/components/project/project.component.html @@ -76,8 +76,8 @@

    {{ project.description }}

    - - +
    +
    + +
    + +
    + + - - \ No newline at end of file + diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html index 5edb9ec..e3f3b6a 100644 --- a/src/app/components/project-card/project-card.component.html +++ b/src/app/components/project-card/project-card.component.html @@ -3,11 +3,8 @@
    -
    {{project.name}}
    {{project.description | trimText}}
    - -