Semantic UI version

This commit is contained in:
Gergely Polonkai 2018-07-13 10:19:37 +02:00
parent b82cacc665
commit b54674c703
18 changed files with 594 additions and 143 deletions

View File

@ -85,6 +85,7 @@ class CalendarSocialApp(Flask):
self.config.from_pyfile(f'config_{config_name}.py', True)
# Make sure we look up users both by their usernames and email addresses
self.config['SECURITY_USER_IDENTITY_ATTRIBUTES'] = ('username', 'email')
self.config['SECURITY_LOGIN_USER_TEMPLATE'] = 'login.html'
db.init_app(self)
babel = Babel(app=self)
babel.localeselector(get_locale)

View File

@ -2,6 +2,14 @@ header > h1 > img {
height: 1em;
}
#content {
margin-top: 10px;
}
.timezone-warning {
color: #e94a4a;
}
footer {
margin-top: 3em;
font-weight: bold;
@ -14,3 +22,68 @@ footer {
display: none;
}
}
table.calendar > * {
font-family: sans;
}
table.calendar {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
tr.month > td {
text-align: center;
font-weight: bold;
border-bottom: 2px solid black;
padding-bottom: .5em;
}
tr.month > td > a {
font-weight: normal;
color: black;
}
tr.month > td.month-name > a {
font-weight: bold;
}
tr.days > td {
text-align: center;
border-bottom: 2px solid black;
}
tr.week > td {
height: 3em;
}
tr.week > td > span.day-num {
font-weight: bold;
}
tr.week > td.other-month > span.day-num {
font-weight: normal;
color: #909090;
}
tr.week > td.today {
background-color: #d8d8d8;
}
tr.week > td > a.event {
display: block;
color: black;
text-decoration: none;
border: 1px solid green;
background-color: white;
border-radius: 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
tr.sizer > td {
width: 14.2857%;
height: 0;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,5 @@
{% macro field(field, inline=false) %}
<div class="{% if inline %}inline {% endif %}field">
{% if field.errors %}
{% for error in field.errors %}
{{ error }}
@ -10,12 +11,10 @@
{% endif %}
{{ field }}
{% if field.widget.input_type == 'checkbox' %}
{{ field.label }}
{% endif %}
{% if not inline %}
<br>
{{ field.label }}<br>
{% endif %}
{% if field.description %}
{{ field.description }}
{% endif %}
</div>
{% endmacro %}

View File

@ -9,6 +9,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/calendar-social-icon-192.png') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.0/css/fork-awesome.min.css" integrity="sha256-sX8HLspqYoXVPetzJRE4wPhIhDBu2NB0kYpufzkQSms=" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='semantic/semantic.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
@ -18,30 +19,34 @@
</head>
<body>
<header>
<h1>
<div class="ui top attached menu">
<div class="header item">
<img src="{{ url_for('static', filename='images/calendar-social-icon.svg') }}">
Calendar.social
</h1>
<nav class="menu">
{% if current_user.is_authenticated %}
{{ _('Logged in as %(username)s', username=('<a href="' + url_for('display_profile', username=current_user.username) + '">' + current_user.username + '</a>') | safe) }}
{% endif %}
<ul>
</div>
<div class="right menu">
{% if not current_user.is_authenticated %}
<li><a href="{{ url_for('security.login') }}">{% trans %}Login{% endtrans %}</a></li>
<a class="item" href="{{ url_for('security.login') }}">{% trans %}Login{% endtrans %}</a>
{% else %}
<li><a href="{{ url_for('hello') }}">{% trans %}Calendar view{% endtrans %}</a></li>
<li><a href="{{ url_for('notifications') }}">{% trans %}Notifications{% endtrans %}</a></li>
<li><a href="{{ url_for('settings') }}">{% trans %}Settings{% endtrans %}</a></li>
<li><a href="{{ url_for('security.logout') }}">{% trans %}Logout{% endtrans %}</a></li>
<div class="item">
{{ _('Logged in as %(username)s', username=('<a href="' + url_for('display_profile', username=current_user.username) + '">' + current_user.username + '</a>') | safe) }}
</div>
<a class="item" href="{{ url_for('hello') }}">{% trans %}Calendar view{% endtrans %}</a>
<a class="item" href="{{ url_for('notifications') }}">{% trans %}Notifications{% endtrans %}</a>
<a class="item" href="{{ url_for('settings') }}">{% trans %}Settings{% endtrans %}</a>
<a class="item" href="{{ url_for('security.logout') }}">{% trans %}Logout{% endtrans %}</a>
{% endif %}
</ul>
</nav>
</div>
</div>
</header>
<div class="ui container" id="content">
{% block content %}{% endblock %}
<footer>
</div>
<footer class="ui segment">
Soon…™
</footer>
{% block scripts %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='semantic/semantic.min.js') }}"></script> <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
</body>
</html>

View File

@ -2,15 +2,23 @@
{% from '_macros.html' import field %}
{% block content %}
<h1>
<h2 class="ui header">
<div class="content">
{{ event.title }}<br>
<small>
{{ event.start_time_for_user(current_user) }}{{ event.end_time_for_user(current_user) }}
{% if current_user.timezone | string != event.time_zone %}
({{ event.start_time_tz }}{{ event.end_time_tz }} {{ event.time_zone }})
<div class="sub header">
{%- if current_user.timezone | string != event.time_zone -%}
<span title="{{ _('This event is organised in the %(timezone)s time zone, in which it happens between %(start_time)s and %(end_time)s', timezone=event.time_zone, start_time=event.start_time_tz|datetimeformat(rebase=false), end_time=event.end_time_tz|datetimeformat(rebase=false)) }}">
<i class="fa fa-exclamation-triangle timezone-warning"></i>
<span class="sr-only">
{{ _('This event is organised in the %(timezone)s time zone, in which it happens between %(start_time)s and %(end_time)s', timezone=event.time_zone, start_time=event.start_time_tz, end_time=event.end_time_tz) }}
</span>
</span>
{% endif %}
</small>
</h1>
{{ event.start_time_for_user(current_user) | datetimeformat(rebase=false) }}
{{ event.end_time_for_user(current_user) | datetimeformat(rebase=false) }}
</div>
</h2>
{{ event.description }}
<hr>
<h2>{% trans %}Invited users{% endtrans %}</h2>
@ -26,11 +34,12 @@
</ul>
<hr>
<h2>{% trans %}Invite{% endtrans %}</h2>
<form method="post">
<form method="post" class="ui form">
{{ form.hidden_tag() }}
<div class="inline fields">
{{ field(form.invitee, inline=true) }}
<button type="submit">{% trans %}Invite{% endtrans %}</button>
<button type="submit" class="ui button">{% trans %}Invite{% endtrans %}</button>
</div>
</form>
{% endblock %}

View File

@ -3,7 +3,7 @@
{% block content %}
<h2>Create event</h2>
<form method="post">
<form method="post" class="ui form">
{{ form.hidden_tag() }}
{% if form.errors %}
@ -20,7 +20,7 @@
{{ field(form.all_day) }}
{{ field(form.description) }}
<button type="submit">{% trans %}Save{% endtrans %}</button>
<a href="{{ url_for('hello') }}">Cancel</a>
<button type="submit" class="ui primary button">{% trans %}Save{% endtrans %}</button>
<a href="{{ url_for('hello') }}" class="ui button">Cancel</a>
</form>
{% endblock content %}

View File

@ -9,17 +9,19 @@
<p>
{% trans %}These are the first steps you should make before you can start using the site.{% endtrans %}
</p>
<form method="post">
{{ form.errors }}
<form method="post" class="ui form">
{{ form.hidden_tag() }}
<p>
{{ field(form.display_name) }}
</p>
<p>
{{ field(form.time_zone) }}
</p>
{% if form.errors %}
{% for error in form.errors %}
{{ error }}
{% endfor %}
<br>
{% endif %}
<button type="submit">{% trans %}Save{% endtrans %}</button>
{{ field(form.display_name) }}
{{ field(form.time_zone) }}
<button type="submit" class="ui primary button">{% trans %}Save{% endtrans %}</button>
</form>
{% endblock content %}

View File

@ -2,12 +2,22 @@
{% block content %}
<h2>{% trans %}Follow requests{% endtrans %}</h2>
{% if requests.count() %}
<ul>
{% for req in requests %}
<li>
{{ req.follower }}
<a href="{{ url_for('accept_follow', follower_id=req.follower_id) }}">{% trans %}Accept{% endtrans %}</a>
<a href="{{ url_for('accept_follow', follower_id=req.follower_id) }}" class="ui button">{% trans %}Accept{% endtrans %}</a>
</li>
{% endfor %}
</ul>
{% else %}
{% trans %}No requests to display.{% endtrans %}
{% endif %}
{% if not current_user.profile.locked %}
<p>
{% trans %}Your profile is not locked.{% endtrans %}
{% trans %}Anyone can follow you without your consent.{% endtrans %}
</p>
{% endif %}
{% endblock content %}

View File

@ -5,5 +5,5 @@
{% include 'month-view.html' %}
<a href="{{ url_for('new_event') }}">{% trans %}Add event{% endtrans %}</a>
<a href="{{ url_for('new_event') }}" class="ui primary button">{% trans %}Add event{% endtrans %}</a>
{% endblock content %}

View File

@ -0,0 +1,26 @@
{#
FIXME: This template should live under security/ if the app templates would override extension
templates…
#}
{% extends 'base.html' %}
{% from '_macros.html' import field %}
{% block content %}
<h1>{% trans %}Login{% endtrans %}</h1>
<form method="post" class="ui form">
{{ login_user_form.hidden_tag() }}
{% if login_user_form.errors %}
{% for error in login_user_form.errors %}
{{ error }}
{% endfor %}
<br>
{% endif %}
{{ field(login_user_form.email) }}
{{ field(login_user_form.password) }}
{{ field(login_user_form.remember) }}
<button type="submit" class="ui primary button">{% trans %}Login{% endtrans %}</button>
</form>
{% endblock %}

View File

@ -1,69 +1,3 @@
<style>
table.calendar > * {
font-family: sans;
}
table.calendar {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
tr.month > td {
text-align: center;
font-weight: bold;
border-bottom: 2px solid black;
padding-bottom: .5em;
}
tr.month > td > a {
font-weight: normal;
color: black;
}
tr.month > td.month-name > a {
font-weight: bold;
}
tr.days > td {
text-align: center;
border-bottom: 2px solid black;
}
tr.week > td {
height: 3em;
}
tr.week > td > span.day-num {
font-weight: bold;
}
tr.week > td.other-month > span.day-num {
font-weight: normal;
color: #909090;
}
tr.week > td.today {
background-color: #d8d8d8;
}
tr.week > td > a.event {
display: block;
color: black;
text-decoration: none;
border: 1px solid green;
background-color: white;
border-radius: 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
tr.sizer > td {
width: 14.2857%;
height: 0;
}
</style>
<table class="calendar">
<thead>
<tr class="sizer">

View File

@ -3,5 +3,7 @@
{% block content %}
{% for notif in notifs %}
{{ notif.html }}<br>
{% else %}
{% trans %}Nothing to show.{% endtrans %}
{% endfor %}
{% endblock content %}

View File

@ -1,16 +1,21 @@
{% extends 'settings-base.html' %}
{% from '_macros.html' import field %}
{% block content %}
{{ super() }}
{% block settings_content %}
<h2>{% trans %}Edit profile{% endtrans %}</h2>
<form method="post">
<form method="post" class="ui form">
{{ form.hidden_tag() }}
{{ form.errors }}
{% if form.errors %}
{% for error in form.errors %}
{{ error }}
{% endfor %}
<br>
{% endif %}
{{ field(form.display_name) }}
{{ field(form.locked) }}
{{ field(form.locked, inline=true) }}
<button type="submit">{% trans %}Save{% endtrans %}</button>
<button type="submit" class="ui primary button">{% trans %}Save{% endtrans %}</button>
</form>
{% endblock content %}
{% endblock settings_content %}

View File

@ -2,15 +2,18 @@
{% from '_macros.html' import field %}
{% block content %}
<form method="post">
{{ form.errors }}
<form method="post" class="ui form">
{{ form.hidden_tag() }}
{% for error in form.errors %}
{{ form.errors }}
{% endfor %}
{{ field(form.username) }}
{{ field(form.email) }}
{{ field(form.password) }}
{{ field(form.password_retype) }}
<button type="submit">{% trans %}Register{% endtrans %}</button>
<button type="submit" class="ui primary button">{% trans %}Register{% endtrans %}</button>
</form>
{% endblock %}

View File

@ -1,10 +1,15 @@
{% extends 'base.html' %}
{% block content %}
<nav>
<ul>
<li><a href="{{ url_for('edit_profile') }}">{% trans %}Edit profile{% endtrans %}</a></li>
<li><a href="{{ url_for('settings') }}">{% trans %}Settings{% endtrans %}</a></li>
</ul>
</nav>
<div class="ui grid">
<div class="four wide column">
<div class="ui secondary pointing vertical menu">
<a class="item{% if request.endpoint == 'edit_profile' %} active{% endif %}" href="{{ url_for('edit_profile') }}">{% trans %}Edit profile{% endtrans %}</a>
<a class="item{% if request.endpoint == 'settings' %} active{% endif %}" href="{{ url_for('settings') }}">{% trans %}Settings{% endtrans %}</a>
</div>
</div>
<div class="twelve wide stretched column">
{% block settings_content %}{% endblock %}
</div>
</div>
{% endblock %}

View File

@ -1,18 +1,20 @@
{% extends 'settings-base.html' %}
{% from '_macros.html' import field %}
{% block content %}
{{ super() }}
{% block settings_content %}
<h2>{% trans %}Settings{% endtrans %}</h2>
<form method="post">
<form method="post" class="ui form">
{{ form.hidden_tag() }}
{{ form.errors }}
{% if form.errors %}
{% for error in form.errors %}
{{ error }}
{% endfor %}
<br>
{% endif %}
{{ field(form.timezone) }}
<button type="submit">{% trans %}Save{% endtrans %}</button>
<a href="{{ url_for('hello') }}">Cancel</a>
<button type="submit" class="ui primary button">{% trans %}Save{% endtrans %}</button>
</form>
{% endblock content %}
{% endblock settings_content %}