Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing page #339

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Landing page #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
123d3bd
Removed login and registration from home page, made page responsive
Nov 20, 2020
183d0c7
Merged about sections and made page responsive
Nov 23, 2020
c058910
Changed select icons for tag subscription section to differentiate bl…
Nov 24, 2020
3b1d186
Working demo page without modularized code
Dec 10, 2020
72dcb88
Forgot to add JS file for demo
Dec 10, 2020
bd5feaf
Modularized demo and settings tag subscription table and added module…
Feb 3, 2021
782ba84
Finished landing page redesign with some animations but not all
Feb 6, 2021
265a16c
Fixed border-radius of footer join component and added hover effect t…
Feb 6, 2021
242847d
Added some fade-out and hover transitions to tag subscription demo in…
Mar 2, 2021
1aa1c66
Added sliding up animation for features section
Mar 2, 2021
ca434f8
Fixed logo alignment a bit, added attribution for email pattern, and …
Mar 2, 2021
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
120 changes: 45 additions & 75 deletions browser/templates/murmur/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,85 +13,55 @@
{% endblock %}

{% block content %}

<div class="container-home">
<div class="home-left">
<h4>We're re-imagining mailing lists and community discourse for the age of social media.</h4>
<p>Murmur is a new tool for group communication that blends concepts from mailing lists, forums, and social media.
<div id="container-about" class="container-fluid mt-5">
<div id="about-left" class="m-5">
<h4>We're re-imagining mailing lists and community discourse for the age of social media.</h4>
<p>Murmur is a new tool for group communication that blends concepts from mailing lists, forums, and social media.
Now members can choose how they receive emails and collaboratively moderate discussion.</p>
<p>Murmur is a research project from the <a href="http://haystack.csail.mit.edu">Haystack Group</a> at <a href="http://csail.mit.edu">MIT CSAIL</a>.</p>

<p class="mb-5">Murmur is a research project from the <a href="http://haystack.csail.mit.edu">Haystack Group</a> at <a href="http://csail.mit.edu">MIT CSAIL</a>.</p>

<h4>Publications</h4>
<div class="d-inline-block mb-2">
<span>Amy X. Zhang, Mark S. Ackerman, David R. Karger.</span>
<h4>Publications</h4>
<p class="mb-4">Amy X. Zhang, Mark S. Ackerman, David R. Karger.
<span class="strong">Mailing Lists: Why Are They Still Here, What’s Wrong With Them, and How Can We Fix Them?</span>
<span>In Proceedings of the ACM Conference on Human Factors in Computing Systems
(CHI 2015). Seoul, Korea. April 2015.</span>
In Proceedings of the ACM Conference on Human Factors in Computing Systems
(CHI 2015). Seoul, Korea. April 2015.</p>
<div id="pub-links" class="mb-5">
<a href="http://people.csail.mit.edu/axz/papers/mailinglists.pdf"><button class="btn btn-xs btn-primary mr-1 mb-1">PDF</button></a>
<a href="http://people.csail.mit.edu/axz/mailinglists.html"><button class="btn btn-xs btn-primary mr-1 mb-1">Slides</button></a>
<a href="http://haystack.csail.mit.edu/blog/2015/05/05/mailing-lists-why-are-they-still-here-whats-wrong-with-them-and-how-can-we-fix-them/"><button class="btn btn-xs btn-primary mr-1 mb-1">Blog Post</button></a>
</div>
<h4>Code</h4>
<p>Check out our <a href="https://github.com/haystack/murmur">Github page</a> to run your own version, report an issue, see what we're currently
working on, or get involved!</p>
<p>Still curious about Murmur? Then
<a href="/group_list">explore some public groups</a>!</p>
</div>

<a href="http://people.csail.mit.edu/axz/papers/mailinglists.pdf"><button class="btn btn-xs btn-primary">PDF</button></a>
<a href="http://people.csail.mit.edu/axz/mailinglists.html"><button class="btn btn-xs btn-primary">Slides</button></a>
<a href="http://haystack.csail.mit.edu/blog/2015/05/05/mailing-lists-why-are-they-still-here-whats-wrong-with-them-and-how-can-we-fix-them/"><button class="btn btn-xs btn-primary">Blog Post</button></a>


<br />
<br />
<h4>Code</h4>
<p>Check out our <a href="https://github.com/haystack/murmur">Github page</a> to run your own version, report an issue, see what we're currently
working on, or get involved!</p>
<p>Still curious about Murmur? Then
<a href="/group_list">explore some public groups</a>!</p>





</div>


<div class="home-right">

<div style="text-align: center;">
<h4>Our Research Team</h4>
<img class="img-circle" src="https://raw.githubusercontent.com/haystack/website/master/images/people/KakaoTalk_Photo_2017-11-22-17-47-17.jpeg" width=70><BR>
<h5>Soya Park</h5>
Ph.D. Student,
Haystack Group<br />
MIT CSAIL<br />
<a href="http://people.csail.mit.edu/soya">website</a>

<br />
<br />
<img class="img-circle" src="http://people.csail.mit.edu/axz/img/pic2.jpg" width=70><BR>
<h5>Amy X. Zhang</h5>
Ph.D.,
Haystack and UID Group<br />
MIT CSAIL<br />
<a href="http://people.csail.mit.edu/axz">website</a>

<br />
<br />
<img class="img-circle" src="https://raw.githubusercontent.com/haystack/website/master/images/people/david-karger.jpg" width=70><BR>
<h5>David Karger</h5>
Professor, Haystack Group<br />
MIT CSAIL<br />
<a href="http://people.csail.mit.edu/karger">website</a>

<br />
<br />
</div>
</div>


</div>


<div id="image-attrib">

</div>


<div id="about-right" class="mr-5 my-5">
<h4>Research Team</h4>
<div id="soya" class="mb-4">
<img class="rounded-circle mb-2" src="https://raw.githubusercontent.com/haystack/website/master/images/people/KakaoTalk_Photo_2017-11-22-17-47-17.jpeg" width=70><BR>
<h5 class="m-0">Soya Park</h5>
<p class="m-0">Ph.D. Student, Haystack Group</p>
<p class="m-0">MIT CSAIL</p>
<p class="m-0"><a href="http://people.csail.mit.edu/soya">website</a></p>
</div>
<div id="amy" class="mb-4">
<img class="rounded-circle mb-2" src="http://people.csail.mit.edu/axz/img/pic2.jpg" width=70><BR>
<h5 class="m-0">Amy X. Zhang</h5>
<p class="m-0">Ph.D., Haystack and UID Group</p>
<p class="m-0">MIT CSAIL</p>
<p class="m-0"><a href="http://people.csail.mit.edu/axz">website</a></p>
</div>
<div id="david">
<img class="rounded-circle mb-2" src="https://raw.githubusercontent.com/haystack/website/master/images/people/david-karger.jpg" width=70><BR>
<h5 class="m-0">David Karger</h5>
<p class="m-0">Professor, Haystack Group</p>
<p class="m-0">MIT CSAIL</p>
<p class="m-0"><a href="http://people.csail.mit.edu/karger">website</a></p>
</div>
</div>
</div>
<div id="image-attrib"></div>

{% endblock %}

Expand Down
23 changes: 14 additions & 9 deletions browser/templates/murmur/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,10 @@
<link rel="apple-touch-icon" sizes="144x144" href="/static/images/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/static/images/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/static/images/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/static/images/favicon/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/static/images/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/static/images/favicon/favicon-32x32.svg" sizes="32x32">
<link rel="icon" type="image/png" href="/static/images/favicon/favicon-96x96.svg" sizes="96x96">
<link rel="icon" type="image/png" href="/static/images/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/static/images/favicon/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/static/images/favicon/favicon-16x16.svg" sizes="16x16">
<link rel="manifest" href="/static/images/favicon/android-chrome-manifest.json">
<link rel="shortcut icon" href="/static/images/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Murmur">
Expand All @@ -41,16 +40,18 @@

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" role="navigation">
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" id="logo" href="/"><img class="icon" src="/static/images/favicon/favicon-194x194.png">Murmur</a>
<a class="navbar-brand mt-1" id="logo" href="/">
<img src="/static/images/favicon/favicon-32x32.svg" alt="Murmur's logo a open letter with sound waves" width="32" height="31" class="d-inline-block align-baseline">
Murmur
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{% if user.is_authenticated %}
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav">

{% if not group_page %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarGroupDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Expand Down Expand Up @@ -131,10 +132,14 @@
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/accounts/login/">Login</a>
<a class="nav-link" href="/accounts/login/">
<button id="login-btn" class="btn btn-sm" type="submit">Login</button>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/register/">Register</a>
<a class="nav-link" href="/accounts/register/">
<button id="logout-btn" class="btn btn-sm" type="submit">Register</button>
</a>
</li>
</ul>
</div>
Expand Down
56 changes: 16 additions & 40 deletions browser/templates/murmur/edit_my_settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@

<h3>Edit My Settings for <span id="group-name">{{ group_info.name }}</span></h3>
<form id="group-settings-form" class="mt-4 mb-4">
<article id="mail-delivery-area">
<h4>Mail Delivery</h4>
<article id="email-delivery-area">
<h4>Email Delivery</h4>
<hr />
<label for="all-emails">
{% if settings.all_emails %}
<input class="" type="radio" id="all-emails" name="mail-delivery" value="all-emails" checked>
<input class="" type="radio" id="all-emails" name="email-delivery" value="all-emails" checked>
{% else %}
<input class="" type="radio" id="all-emails" name="mail-delivery" value="all-emails">
<input class="" type="radio" id="all-emails" name="email-delivery" value="all-emails">
{% endif %}
All emails
</label>
Expand All @@ -27,9 +27,9 @@ <h4>Mail Delivery</h4>
width="16" height="16" title="You will be emailed all emails on this list unless you mute a thread">
<label for="first-emails">
{% if not settings.all_emails and not settings.digest and not settings.no_emails %}
<input class="" type="radio" id="first-emails" name="mail-delivery" value="first-emails" checked>
<input class="" type="radio" id="first-emails" name="email-delivery" value="first-emails" checked>
{% else %}
<input class="" type="radio" id="first-emails" name="mail-delivery" value="first-emails">
<input class="" type="radio" id="first-emails" name="email-delivery" value="first-emails">
{% endif %}
First emails
</label>
Expand All @@ -38,17 +38,17 @@ <h4>Mail Delivery</h4>
width="16" height="16" title="You will only be emailed replies in a thread if you explicitly follow the thread. You also automatically follow a thread if you start the thread or contribute a post at any point in the thread">
<label class="mr-5" for="digest-emails">
{% if settings.digest %}
<input class="mr-1" type="radio" id="digest-emails" name="mail-delivery" value="digest-emails" checked>
<input class="mr-1" type="radio" id="digest-emails" name="email-delivery" value="digest-emails" checked>
{% else %}
<input class="mr-1" type="radio" id="digest-emails" name="mail-delivery" value="digest-emails">
<input class="mr-1" type="radio" id="digest-emails" name="email-delivery" value="digest-emails">
{% endif %}
Digest emails
</label>
<label for="no-emails">
{% if settings.no_emails %}
<input class="" type="radio" id="no-emails" name="mail-delivery" value="no-emails" checked>
<input class="" type="radio" id="no-emails" name="email-delivery" value="no-emails" checked>
{% else %}
<input class="" type="radio" id="no-emails" name="mail-delivery" value="no-emails">
<input class="" type="radio" id="no-emails" name="email-delivery" value="no-emails">
{% endif %}
No emails
</label>
Expand Down Expand Up @@ -106,47 +106,23 @@ <h4>Tag Subscription</h4>
{% if settings.tag_blocking_mode %}
<label class="d-block" for="block-mode">
<input class="mr-1" type="radio" id="block-mode" name="tag-mode" value="block-mode" checked>
Send me all except the following blocked tags
Send me all emails except the following blocked tags
</label>
<label class="d-block mb-3" for="subscribe-mode">
<input class="mr-1" type="radio" id="subscribe-mode" name="tag-mode" value="subscribe-mode">
Send me nothing except the following subscribed tags
Send me no emails except the following subscribed tags
</label>
{% else %}
<label class="d-block" for="block-mode">
<input class="mr-1" type="radio" id="block-mode" name="tag-mode" value="block-mode">
Send me all except the following blocked tags
Send me all emails except the following blocked tags
</label>
<label class="d-block mb-3" for="subscribe-mode">
<input class="mr-1" type="radio" id="subscribe-mode" name="tag-mode" value="subscribe-mode" checked>
Send me nothing except the following subscribed tags
Send me no emails except the following subscribed tags
</label>
{% endif %}
<table id="tag-subscription-table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Select</th>
<th>Tag</th>
<th>Description</th>
<th>Num Posts</th>
</tr>
</thead>
<tbody>
{% if tag_info %}
{% for tag in tag_info %}
<tr class="my_row">
<!-- Select, Tag, Description, Number of Posts -->
<td><input class="checkbox checkbox-user" type="checkbox" data-type="tag-select" id ={{ tag.id }}></td>
<td><label class="tag" id="tag_{{ forloop.counter0 }}" style="background-color: #{{ tag.color }}">{{ tag.name }}</label></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nulla et nulla fermentum molestie.</td>
<td><span>{{ tag.num_p }} post(s)</span></td>
</tr>
{% endfor %}
{% else %}
<tr></tr>
{% endif %}
</tbody>
</table>
{% include "./modules/tag_subscription_table.html" with tag_info=tag_info settings=settings %}
</article>
<article id='donotsent-list-area' class="mt-4">
<h3>My do-not-send list of this group</h3>
Expand Down Expand Up @@ -190,7 +166,7 @@ <h3>My do-not-send list of this group</h3>
<script type="text/javascript">
tag_subscription = {{ tag_subscription|safe }};
</script>
<script type="text/javascript" src="/static/javascript/murmur/my_group_settings.js"></script>
<script type="module" src="/static/javascript/murmur/my_group_settings.js"></script>
{% endblock %}


Expand Down
Loading