Currently moving from Gitlab to Gitea at https://labs.phundrak.com. Some features may not work anymore on this Gitlab instance.

some styling on the index

parent 5e654348
Pipeline #123 passed with stage
in 1 minute and 4 seconds
content {
margin: 0 10px 10px 10px;
display: grid;
grid-template-columns: auto;
grid-template-rows: 100px auto;
grid-template-areas: 'message' 'form';
}
form {
grid-area: form;
display: inline-grid;
grid-template-rows: 64px 100px;
grid-template-areas:
'source dest'
'submition submition';
}
sourcelang {
grid-area: source;
}
destlang {
grid-area: dest;
}
sourcelang, destlang {
display: grid;
grid-template-rows: 24px 40px;;
grid-template-areas: 'label' 'select';
}
label {
grid-area: label;
text-align: center;
}
/* inspired from https://coderwall.com/p/w7npmq/fully-custom-select-box-simple-css-only */
.form-style {
border: 1px solid #ddd;
width: 120px;
border-radius: 3px;
overflow: hidden;
/* background: #edf0f2; */
margin: auto;
}
.form-style select, .form-style input {
padding: 5px 8px;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
text-align: center;
-webkit-appearance: none;
}
.form-style select:focus {
outline: none;
}
submit {
margin: auto;
width: 50%;
grid-area: submition;
}
message {
grid-area: message;
margin: 0 20px;
}
sidebar {
}
* {
background: #ecf0f1;
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@font-face {
font-family: "DoulosSIL";
font-display: swap;
src:url("DoulosSIL-R.woff");
}
body {
margin: 0;
height: 100%;
background: #edf0f2;
display: grid;
overflow: auto;
height: 100vh;
grid-template-columns: 300px auto;
grid-template-rows: 90px auto;
grid-template-areas:
'sidebar errormessage'
'sidebar content';
color: #404040;
}
.h1 {
margin-bottom: .2em;
font-size: 175%;
font-family: "Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
font-weight: 700;
text-align: center;
}
.p {
font-size: inherit;
line-height: 24px;
margin: 0 0 24px 0;
box-sizing: border-box;
display: block;
font-family: "DoulosSIL","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
}
sidebar {
grid-area: sidebar;
width: 300px;
background-color: #343131;
}
content {
grid-area: content;
}
errormessage, content {
background-color: #fcfcfc;
}
errormessage {
grid-area: errormessage;
margin: 10px 10px 0px 10px;
color: red;
text-align: center;
font-size: 1.5em;
font-family: "DoulosSIL","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
}
......@@ -6,16 +6,22 @@
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'dictionary/style.css' %}" type="text/css" media="screen" />
<link rel="shortcut icon" href="{% static 'dictionary/mahakala-128x128.png' %}" type="image/png" media="screen" />
{% block addhead %}{% endblock %}
</head>
<body>
{% if error_message %}
<p><strong>{{ error_message }}</strong></p>
{% endif %}
{% block body %}
{% endblock %}
<errormessage>
{% if error_message %}
<p><strong>{{ error_message }}</strong></p>
{% endif %}
</errormessage>
<sidebar></sidebar>
<content>
{% block body %}
{% endblock %}
</content>
</body>
......
......@@ -8,37 +8,43 @@
`to_lang` is the target language, Language
-->
<!-- TITLE ------------------------------------------------------------------->
{% block title %}{{ word.word }} - {{ from_lang.name }}{% endblock %}
<!-- HEADER ------------------------------------------------------------------>
{% block addhead %}
<link rel="stylesheet" href="{% static 'dictionary/details.css' %}" type="text/css" media="screen" />
{% endblock %}
<!-- BODY -------------------------------------------------------------------->
{% block body %}
<word>{{ word.word }}</word>
<fromlang>Language: {{ from_lang.name }}</fromlang>
{% if word.gender %}
<gender>Gender: {{ word.gender }}</gender>
{% endif %}
<gender>
Gender:
{% if word.gender %}
{{ word.gender }}
{% endif %}
</gender>
<wordclass>Word class: {{word.wordclass}} </wordclass>
{% if translations %}
<listtrans>
<p>Translations of {{ word.word }} in {{ to_lang.name }}:</p>
{% if translations %}
<p>Translations of “{{ word.word }}” in {{ to_lang.name }}:</p>
<ul>
{% for translation in translations %}
<li><a href="{% url 'dictionary:details' to_lang.code from_lang.code translation.slug %}">{{ translation.word }}</a></li>
<!--TODO: link to the word's page-->
{% endfor %}
</ul>
{% endif %}
</listtrans>
{% endif %}
{% if word.details %}
<transdetails>{{ word.details }}</transdetails>
{% endif %}
{% if word.etymology %}
<transdetails>{% if word.details %}{{ word.details }}{% endif %}</transdetails>
<etymology>
{% if word.etymology %}
{% if word.roots.all %}
<roots>
<p>Etymological roots:</p>
......@@ -50,6 +56,6 @@
</ul>
</roots>
{% endif %}
{% endif %}
</etymology>
{% endif %}
{% endblock %}
......@@ -12,25 +12,31 @@
{% endblock %}
{% block body %}
<message>Please select the languages you want to translate from and to.</message>
<message class="h1">Please select the languages you want to translate from and to</message>
<form method="post" id="langselect" action="/dictionary/" enctype="multipart/form-data">
{% csrf_token %}
<sourcelang>
<label for="source">Translate from:</label>
<select id="source" name="from_lang">
{% for lang in all_languages %}
<option value="{{lang.code}}">{{lang.name}}</option>
{% endfor %}
</select>
<label for="source" class="p">Translate from</label>
<div class="form-style">
<select id="source" name="from_lang">
{% for lang in all_languages %}
<option value="{{lang.code}}">{{lang.name}}</option>
{% endfor %}
</select>
</div>
</sourcelang>
<destlang>
<label for="dest" >to:</label>
<select id="dest" name="to_lang">
{% for lang in all_languages %}
<option value="{{lang.code}}">{{lang.name}}</option>
{% endfor %}
</select>
<label for="dest" class="p">to</label>
<div class="form-style" >
<select id="dest" name="to_lang">
{% for lang in all_languages %}
<option value="{{lang.code}}">{{lang.name}}</option>
{% endfor %}
</select>
</div>
</destlang>
<input type="submit" value="Let’s Go!">
<submit class="form-style">
<input type="submit" value="Let’s Go!">
</div>
</form>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment