Skip to content
This repository was archived by the owner on Aug 24, 2021. It is now read-only.

Enable image popup on mobile device #168 #200

Open
jia1 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Enable image popup on mobile device #168 #200

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
2 changes: 2 additions & 0 deletions contents/handbook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>[Aug15] Handbook - CS2103/T</title>
<link type="text/css" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.css"/>
<link type="text/css" rel="stylesheet" href="../vendor/magnific-popup/magnific-popup.min.css"/>
<link type="text/css" rel="stylesheet" href="../styles/common.css"/>
<link type="text/css" rel="stylesheet" href="../styles/handbook.css"/>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
Expand Down Expand Up @@ -257,6 +258,7 @@ <h1>Appendix F: What to do if there are teamwork issues</h1>

</script>
<p>-------------------------------------End of document----------------------------------------</p>
<script type="text/javascript" src="../vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
Copy link
Copy Markdown
Collaborator

@acjh acjh Dec 13, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, popups are initialised in common.js, which handbook doesn't load.
But some considerations before you rush to initialise popups in handbook.js:

  • Cloning code is generally bad.
  • Handbook content now loads in a different manner - you may have to iron those bugs.
  • Anyway, there's no image in handbook needing popup, that's not already a good size.

I'd recommend targeting the schedule for now, which is sufficient (and what's intended).

<script type="text/javascript" src="../scripts/handbook.js"></script>
</body>
</html>
2 changes: 2 additions & 0 deletions contents/schedule.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Aug16] Schedule - CS2103/T</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.css" />
<link type="text/css" rel="stylesheet" href="../vendor/magnific-popup/magnific-popup.min.css" />
<link type="text/css" rel="stylesheet" href="../styles/common.css" />
</head>
<body>
Expand Down Expand Up @@ -107,6 +108,7 @@ <h3 id="header-content-week14" class="buttoned"><span>Reading Week [<span class=
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="../vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="../scripts/common.js"></script>
</body>
</html>
18 changes: 18 additions & 0 deletions scripts/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,20 @@ function addAutoScrollToClickedWeekHeader() {
});
}

function addModalToImg() {
var popupClassName = 'image-popup-fit-width';
$('img').wrap(function() {
return '<a class="' + popupClassName + '" href="' + $(this).attr('src') + '"></a>';
});
$('.' + popupClassName).magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
}

$(document).ready(function() {

makeAccordion('.weeklyschedule');
Expand Down Expand Up @@ -339,3 +353,7 @@ $(document).ready(function() {
});

});

$(window).load(function() {
addModalToImg();
});
Copy link
Copy Markdown
Collaborator

@acjh acjh Dec 13, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this work if executed in $(document).ready as recommended?

42 changes: 42 additions & 0 deletions styles/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -540,3 +540,45 @@ img {
.separator {
border-top: 1px solid #ccd8e2;
}

/*
CSS for magnific-popup
*/

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
Copy link
Copy Markdown
Collaborator

@acjh acjh Dec 13, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.mfp-no-margins is an unused class.

padding: 0;
}

/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}

/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}

.mfp-with-zoom .mfp-container,
Copy link
Copy Markdown
Collaborator

@acjh acjh Dec 13, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You didn't initialize popup with zoom options.

.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
4 changes: 4 additions & 0 deletions vendor/magnific-popup/jquery.magnific-popup.min.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions vendor/magnific-popup/magnific-popup.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.