[MediaWiki-commits] [Gerrit] Switch the canvas to a div layout - change (labs...ptable)

[Tobias47n9e (Code Review)]

Tobias47n9e has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/277072

Change subject: Switch the canvas to a div layout
......................................................................

Switch the canvas to a div layout

Currently the layout of the page relies on tables.
This commit switches the canvas to a responsive
div layout. The legend floats over the canvas on
tablets and desktops. On phones the legend is shown
below the canvas.

Change-Id: I57d92839094f9f0cf6a5947124ed3347c323eeea
---
M static/nuclides.css
M templates/nuclides_common.html
2 files changed, 64 insertions(+), 17 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/labs/tools/ptable 
refs/changes/72/277072/1

diff --git a/static/nuclides.css b/static/nuclides.css
index 13a30b3..82d7a15 100644
--- a/static/nuclides.css
+++ b/static/nuclides.css
@@ -316,3 +316,45 @@
 svg#nuclides text {
        font-size: 4px;
 }
+
+.nuclide-canvas {
+       display: block;
+       position: relative;
+}
+
+.nuclide-legend {
+       position: absolute;
+       bottom: 20px;
+       right: 20px;
+       background-color: white;
+       border: 1px solid black;
+       padding: 15px;
+}
+
+.nuclide-chart {
+       border: 2px solid black;
+       margin: 15px 0;
+}
+
+.wikidata-logo {
+       position: absolute;
+       top: 10px;
+       right: 10px;
+}
+
+.wikidata-logo img {
+       width: 100px;
+}
+
+@media screen and (max-width: 500px) {
+       /* move legend below canvas */
+       .nuclide-legend {
+               position: relative;
+               bottom: 0;
+               right: 0;
+       }
+
+       .wikidata-logo {
+               display: none;
+       }
+}
diff --git a/templates/nuclides_common.html b/templates/nuclides_common.html
index f1353ab..7247ed4 100644
--- a/templates/nuclides_common.html
+++ b/templates/nuclides_common.html
@@ -47,26 +47,31 @@
   <input type="range" id="nuclides-zoom-range" min="0.2" max="2" step="0.05"/>
   <button id="nuclides-reset">Reset</button>
 </section>
-<table>
-<tr><td>
-    <svg height="600px" width="700px" viewBox="-10 -{{ max_protons + 10 }} {{ 
max_neutrons + 20 }} {{ max_protons + 20 }}" preserveAspectRatio="xMinYMin 
meet" id="nuclides">
-       {%- for magic_number in magic_numbers -%}
-           {%- if magic_number < max_neutrons -%}
-                <line x1="{{ magic_number + 0.5 }}" y1="-{{ max_protons }}" 
x2="{{ magic_number + 0.5 }}" y2="0" />
-                <text transform="translate({{ magic_number }}, -{{ 
2*magic_number**0.8 + 10 }})rotate(-90)">{{ magic_number }} neutrons</text>
+<div class="nuclide-canvas">
+  <div class="nuclide-chart">
+    <svg height="600px" viewBox="-10 -{{ max_protons + 10 }} {{ max_neutrons + 
20 }} {{ max_protons + 20 }}" preserveAspectRatio="xMinYMin meet" id="nuclides">
+      {%- for magic_number in magic_numbers -%}
+        {%- if magic_number < max_neutrons -%}
+        <line x1="{{ magic_number + 0.5 }}" y1="-{{ max_protons }}" x2="{{ 
magic_number + 0.5 }}" y2="0" />
+          <text transform="translate({{ magic_number }}, -{{ 
2*magic_number**0.8 + 10 }})rotate(-90)">{{ magic_number }} neutrons</text>
             {%- endif -%}
-           {%- if magic_number < max_protons -%}
-                <line x1="0" y1="-{{ magic_number - 0.5 }}" x2="{{ 
max_neutrons }}" y2="-{{ magic_number - 0.5 }}" />
+        {%- if magic_number < max_protons -%}
+        <line x1="0" y1="-{{ magic_number - 0.5 }}" x2="{{ max_neutrons }}" 
y2="-{{ magic_number - 0.5 }}" />
                 <text x="{{ magic_number *1.5 + 25 }}" y="-{{ magic_number 
}}">{{ magic_number }} protons</text>
-            {%- endif -%}
-        {%- endfor -%}
-       {%- for nuclide in nuclide_list -%}
-               {{ format_cell(nuclide) }}
-       {%- endfor -%}
+        {%- endif -%}
+      {%- endfor -%}
+      {%- for nuclide in nuclide_list -%}
+        {{ format_cell(nuclide) }}
+      {%- endfor -%}
    </svg>
-</td><td>
-{% block legend %}{% endblock %}
-</td></tr></table>
+  </div>
+  <div class="nuclide-legend">
+    {% block legend %}{% endblock %}
+  </div>
+  <div class="wikidata-logo">
+    <img 
src="https://upload.wikimedia.org/wikipedia/commons/6/66/Wikidata-logo-en.svg"; 
/>
+  </div>
+</div>
 
 <hr>
 

-- 
To view, visit https://gerrit.wikimedia.org/r/277072
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I57d92839094f9f0cf6a5947124ed3347c323eeea
Gerrit-PatchSet: 1
Gerrit-Project: labs/tools/ptable
Gerrit-Branch: master
Gerrit-Owner: Tobias47n9e <tobias47...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits