Skip to content

Commit

Permalink
Fixes fossasia#1267: Infobox share modal, styling fixes, redundancies…
Browse files Browse the repository at this point in the history
… removed
  • Loading branch information
Pipe-Runner authored and subhahu123 committed Feb 2, 2019
1 parent f5023a8 commit 13f8b38
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 150 deletions.
196 changes: 112 additions & 84 deletions src/app/infobox/infobox.component.css
Original file line number Diff line number Diff line change
@@ -1,44 +1,73 @@
.main_image{
.main_image {
width: 100%;
height: 100%;
height: 100%;
max-height: 200px;
max-width: 165px;
}
.info-img{
.info-img {
float: right;
margin-right:10px;
margin-top:-110px;
margin-right: 10px;
margin-top: -110px;
margin-left: 3px;
}/* The Modal (background) */
.mod {

position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
padding-top: 100px; /* Location of the box */
}

/* Modal styles */

.modal-background {
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
}

/* Modal Content */
.mod-cont {
.modal-container {
position: fixed;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
z-index: 1002;
background-color: #fefefe;
margin: auto;
padding: 2em;
font-size: 1.1em;
border-radius: 25px;
border-radius: 4px;
border: 1px solid #888;
width: 30%;
height: 40%;
width: 324px;
height: 300px;
}
.mod-cont h1{

.modal-container h1 {
font-weight: bold;
}
.btn{

.icon-container {
margin: 42px 24px 0px 24px;
display: flex;
flex-direction: column;
}
.icon-container > * + * {
margin-top: 24px;
}
.icon-wrapper {
height: 38px;
display: flex;
flex-direction: row;
}
.icon-text {
height: 38px;
line-height: 38px;
vertical-align: middle;
margin: 0px 0px 0px 16px;
}

.btn {
background: none;
}
/* The Close Button */
Expand All @@ -47,18 +76,19 @@
float: right;
font-size: 28px;
font-weight: bold;
margin: 24px 8px 24px 0px;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.card {
/* Add shadows to create the "card" effect */
border: 1px solid rgba(150,150,150,0.3);
border-bottom-color: rgba(125,125,125,0.3);
border: 1px solid rgba(150, 150, 150, 0.3);
border-bottom-color: rgba(125, 125, 125, 0.3);
margin-bottom: 16px;
padding: 22px 22px 18px 22px;
transition: 0.3s;
Expand All @@ -77,56 +107,58 @@ p {
font-family: Arial, sans-serif;
font-size: 13px;
}
a:hover, a:visited, a:link, a:active {
a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}
.query_description {
color: #777;
font-family: arial,sans-serif;
font-family: arial, sans-serif;
margin-top: -25px;
font-size: 1em;
max-width: 200px;
}
hr{
hr {
margin-top: 0px;
}
/**Browser Specific CSS**/
@-moz-document url-prefix(){
.query_description{
margin-top: -8px!important;
}
h2{
font-size: 2.3em!important;
}
@-moz-document url-prefix() {
.query_description {
margin-top: -8px !important;
}
h2 {
font-size: 2.3em !important;
}
}
/** Screen Responsiveness **/
@media screen and (max-width: 1307px) {
.card {
width: 366px;
}
@media screen and (max-width: 1307px) {
.card {
width: 366px;
}
h2 {
font-size: 2em;
}
.query_description {
font-size: 0.8em;
max-width: 180px;
}
.main_image {
margin-top: 15px;
margin-left: 10px;
margin-right: -25px;
}
@-moz-document url-prefix() {
h2 {
font-size: 2em;
font-size: 1.6em !important;
}
.query_description{
font-size: 0.8em;
max-width: 180px;
.query_description {
font-size: 0.7em !important;
max-width: 180px !important;
}
.main_image{
margin-top: 15px;
margin-left: 10px;
margin-right: -25px;
}
@-moz-document url-prefix(){
h2 {
font-size: 1.6em!important;
}
.query_description{
font-size: 0.7em!important;
max-width: 180px!important;
}
}
}

}
}

@media screen and (max-width: 1205px) {
.card {
Expand All @@ -135,54 +167,50 @@ hr{
h2 {
font-size: 1.9em;
}
.main_image{
.main_image {
margin-top: 15px;
margin-left: 10px;
max-width: 150px;
margin-right: -47px;
}
}


@media screen and (max-width: 767px) {
.card {
width: 95vw;
margin-left: 4vw;
}
.main_image{
.main_image {
margin-right: 0;
}
}

@media screen and (max-width: 1159px) and (min-width: 768px){
@media screen and (max-width: 1159px) and (min-width: 768px) {
.card {
width: 50vw;
}
}


@media screen and (max-width: 390px) {
h2{
font-size: 1.5em;
}
.info-img{
width: 40%;
height: 40%;
}
@media screen and (max-width: 390px) {
h2 {
font-size: 1.5em;
}
.info-img {
width: 40%;
height: 40%;
}
}

@media screen and (max-width: 320px){
.query_description{
@media screen and (max-width: 320px) {
.query_description {
font-size: 0.7em;
}
@-moz-document url-prefix(){
h2{
font-size: 1.2em!important;
@-moz-document url-prefix() {
h2 {
font-size: 1.2em !important;
}
}
}
}
.fa{
font-size: 2em;
width:1em;
height: 1em;
.fa {
font-size: 38px;
}
94 changes: 61 additions & 33 deletions src/app/infobox/infobox.component.html
Original file line number Diff line number Diff line change
@@ -1,35 +1,63 @@
<div *ngIf="this.description" class="card" [hidden]="!isVisible" [style.color]="themeService.cardColor">
<div>
<div *ngIf="this.showModal" id="modo" class="mod">
<!-- Modal content -->
<div class="mod-cont">
<span class="close" (click)="close();">&times;</span>
<h1>Share This Link on {{this.title}}</h1>
<hr>
<ul>
<a href="https://twitter.com/intent/tweet?text=Check%20this%20out%20%23susper%20%40Susper_%20http%3A%2F%2Fsusper.com%2Fsearch%3Fquery%3D{{this.title}}%26start%3D0%26rows%3D10%26mode%3Dtext" target="_blank"> <i class="fa fa-twitter-square"></i> Twitter</a>
<br>
<a href="https://www.facebook.com/sharer.php?u=http://susper.com/search?query={{this.title}}&start=0&rows=10&mode=text" target="_blank"> <i class="fa fa-facebook-square"></i> Facebook</a>
</ul>
</div>
</div>
<h2><b [style.color]="themeService.cardColor">{{this.title}}</b><button class="btn dropdown-toggle" type="button" (click)="Show();"><i class="material-icons">share</i></button></h2>
<br>
<p class="query_description">{{this.querydescription}}</p>
<hr width="50%" align="left" *ngIf="this.image">
<hr *ngIf="!this.image">
<div class="info-img"><img class="main_image" *ngIf="this.image" src={{this.image}}></div>
<p [style.color]="themeService.descriptionColor">
{{this.description}}
<a [style.color]="themeService.linkColor" href='https://en.wikipedia.org/wiki/{{this.title}}'>
<br>More at Wikipedia</a>
<br>
<a href='https://twitter.com/search?src=typd&q={{this.title}}'>
<br>{{this.title}} on Twitter</a>
<br>
<a href='https://www.youtube.com/results?search_query={{this.title}}'>
<br>{{this.title}} on YouTube</a>
</p>
<div
*ngIf="this.description"
class="card"
[hidden]="!isVisible"
[style.color]="themeService.cardColor"
>
<div>
<div *ngIf="this.isModalOpen">
<!-- Modal content -->
<div class="modal-background" (click)="closeModal()"></div>

<div class="modal-container">
<span class="close" (click)="closeModal()">&times;</span>
<h2 style="margin-left: 24px;">Share</h2>
<div class="icon-container">
<a
href="https://twitter.com/intent/tweet?text=Check%20this%20out%20%23susper%20%40Susper_%20http%3A%2F%2Fsusper.com%2Fsearch%3Fquery%3D{{this.title}}%26start%3D0%26rows%3D10%26mode%3Dtext"
target="_blank"
>
<div class="icon-wrapper">
<i class="fa fa-twitter-square" style="color:#38A1F3;"></i>
<div class="icon-text">Twitter</div>
</div></a
>
<a
href="https://www.facebook.com/sharer.php?u=http://susper.com/search?query={{this.title}}&start=0&rows=10&mode=text"
target="_blank"
>
<div class="icon-wrapper">
<i class="fa fa-facebook-square" style="color:#3b5998;"></i>
<div class="icon-text">Facebook</div>
</div></a
>
</div>
</div>
</div>
</div>
<h2>
<b [style.color]="themeService.cardColor">{{ this.title }}</b
><button class="btn dropdown-toggle" type="button" (click)="ShowModal()">
<i class="material-icons">share</i>
</button>
</h2>
<br />
<p class="query_description">{{ this.querydescription }}</p>
<hr width="50%" align="left" *ngIf="this.image" />
<hr *ngIf="!this.image" />
<div class="info-img"><img class="main_image" *ngIf="this.image" src="{{this.image}}" /></div>
<p [style.color]="themeService.descriptionColor">
{{ this.description }}
<a [style.color]="themeService.linkColor" href="https://en.wikipedia.org/wiki/{{this.title}}">
<br />More at Wikipedia</a
>
<br />
<a href="https://twitter.com/search?src=typd&q={{this.title}}">
<br />{{ this.title }} on Twitter</a
>
<br />
<a href="https://www.youtube.com/results?search_query={{this.title}}">
<br />{{ this.title }} on YouTube</a
>
</p>
</div>
</div>
Loading

0 comments on commit 13f8b38

Please sign in to comment.