Mercurial > libervia-templates
changeset 86:92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
author | Goffi <goffi@goffi.org> |
---|---|
date | Fri, 05 Jan 2018 13:14:22 +0100 |
parents | 05b500bd6235 |
children | 3ee775795cd0 |
files | default/chat/select.html default/components/common.html default/input/field.html default/static/chat_select.css default/static/styles.css |
diffstat | 5 files changed, 97 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/chat/select.html Fri Jan 05 13:14:22 2018 +0100 @@ -0,0 +1,17 @@ +{% if not embedded %}{% extends 'base/base.html' %}{% endif %} +{% import 'input/form.html' as form with context %} +{% import 'input/field.html' as field with context %} + +{% block body %} +<p class="instructions">{% trans %}Please select the chat room you want to enter{% endtrans %}</p> +<ul class="rooms_list"> +{% for room in rooms %} + <li><a href="{{room.url}}">{{room.name}}</a></li> +{% endfor %} +</ul> +<p class="instructions room_jid">{% trans %}Or enter a room address{% endtrans %}</p> +{% call form.form(class="room_jid_form") %} + {{ field.text("jid", _("Room address (JID)"), required=true)}} + {{ field.submit(_("Join")) }} +{% endcall %} +{% endblock body %}
--- a/default/components/common.html Wed Jan 03 01:12:16 2018 +0100 +++ b/default/components/common.html Fri Jan 05 13:14:22 2018 +0100 @@ -13,7 +13,7 @@ <nav class="menu {{class}}"> <ul> {% for name,url in menus %} - <li><a class="menu_item button {{name}}" {{ {'href': url}|xmlattr }}>{{ml[name]}}</a></li> + <li><a class="menu_item {{name}}" {{ {'href': url}|xmlattr }}>{{ml[name]}}</a></li> {% endfor %} </ul> </nav>
--- a/default/input/field.html Wed Jan 03 01:12:16 2018 +0100 +++ b/default/input/field.html Fri Jan 05 13:14:22 2018 +0100 @@ -8,7 +8,7 @@ {% macro int(name, label="", init=0) %} <span class="form_input"> - <label id="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="number" name="{{name}}" value="{{init}}" step="1" min="0"> + <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="number" name="{{name}}" value="{{init}}" step="1" min="0"> </span> {% endmacro %} @@ -16,7 +16,7 @@ {# single line text field additional kwargs will be passed as attributes #} <span class="form_input"> - <label id="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="text" name="{{name}}" placeholder="{{placeholder}}" {{"required" if required}} {{kwargs|xmlattr}}> + <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="text" name="{{name}}" placeholder="{{placeholder}}" {{"required" if required}} {{kwargs|xmlattr}}> </span> {% endmacro %} @@ -24,7 +24,7 @@ {# password field additional kwargs will be passed as attributes #} <span class="form_input"> - <label id="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="password" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}> + <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="password" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}> </span> {% endmacro %} @@ -32,7 +32,7 @@ {# email field additional kwargs will be passed as attributes #} <span class="form_input"> - <label id="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="email" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}> + <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="email" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}> </span> {% endmacro %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/static/chat_select.css Fri Jan 05 13:14:22 2018 +0100 @@ -0,0 +1,65 @@ +#main_area { + overflow: auto; +} + +.instructions { + text-align: center; + font-style: italic; +} + +.rooms_list { + list-style: none; + display: grid; + text-align: center; + padding: 0; +} + +.rooms_list a { + text-decoration: none; + color: inherit; + font-variant: small-caps; + font-weight: bold; +} + +.rooms_list li { + margin-top: 1em; +} + +.rooms_list li:first-child { + margin-top: 0; +} + +.rooms_list li:hover { + background-color: #efefef; +} + +#jid { + margin: 0 1em; + width: 15em; + border-radius: 0.7em; + outline: none; + border: 1px solid black; + padding: 0.4em; + box-shadow: none; +} + +.room_jid_form { + text-align: center; +} + +@media (min-width: 600px) { + .instructions { + padding-top: 3rem; + } + .rooms_list { + grid-template-columns: 1fr 1fr 1fr; + } + + .rooms_list li { + margin-top: 0; + } + + .room_jid_form .form_submit.button { + display: inline; + } +}
--- a/default/static/styles.css Wed Jan 03 01:12:16 2018 +0100 +++ b/default/static/styles.css Fri Jan 05 13:14:22 2018 +0100 @@ -56,6 +56,16 @@ /*** Generic ***/ +.button { + padding: 0.5em 1em; + background: #333; + color: #ccc; + border: 1px solid #555; + border-radius: 0.8em; + font-weight: bold; +} + + .button:hover { background-color: #bc0000; }