git.iko.soy/typeable/octopod
on master help sign in
CSS for unknown and deleted values (#168)

* Code style * keys and values * collapse draft * simplify collapse script * collapse and row * has changes * clean up * deployment * editable tree * unknown and deleted values

commit33ebea97a82766b320a4fc2eedae50a6d7ca3e75 authorAnton Shchukin <a.a.shchukin@gmail.com> dateTue 12 Apr 2022, 22:37 (5 years ago) parentbfec3e4
6 files changed+134−1
compare with master
unifiedsplit
octopod-css/development/layouts/staging.html+6 octopod-css/development/markups/_keys-and-values.html+100−1 octopod-css/development/styles/_key-deleted.css+6 octopod-css/development/styles/_value-deleted.css+5 octopod-css/development/styles/_value-unknown.css+12 octopod-css/development/styles/style.css+5
octopod-css/development/layouts/staging.html+6
@@ -126,6 +126,12 @@
126126 <div class="row">
127127 <span class="key-default-pristine">SECRET_CODE: </span><span class="value-edited">asdfaisdjri235868ear7%^&IUAK$^%&asdfasdfij</span>
128128 </div>
129+ <div class="row">
130+ <span class="key-deleted">sso.vaultEnv.hotels-sso.mapping[0].APP_URL </span><span class="value-deleted">http://my-api.my-domain.com</span>
131+ </div>
132+ <div class="row">
133+ <span class="key-deleted">air.vaultEnv.air-sso:</span> <span class="value-unknown">unknown</span>
134+ </div>
129135 <div class="collapse collapse--project">
130136 <button class="collapse__head" type="button">
131137 air
octopod-css/development/markups/_keys-and-values.html+100−1
@@ -66,6 +66,28 @@
6666 <span class="value-edited">value-edited</span>
6767 </td>
6868 </tr>
69+ <tr>
70+ <td>
71+ Ключ и значение удалены:
72+ </td>
73+ <td>
74+ <span class="key-deleted">key-deleted</span>
75+ </td>
76+ <td>
77+ <span class="value-deleted">value-deleted</span>
78+ </td>
79+ </tr>
80+ <tr>
81+ <td>
82+ Ключ удалён, значение неизвестно:
83+ </td>
84+ <td>
85+ <span class="key-deleted">key-deleted</span>
86+ </td>
87+ <td>
88+ <span class="value-unknown">unknown</span> (value-unknown)
89+ </td>
90+ </tr>
6991 </tbody>
7092 </table>
7193 </div>
@@ -111,6 +133,28 @@
111133 <span class="value-edited">http://my-api.my-domain.com</span>
112134 </td>
113135 </tr>
136+ <tr>
137+ <td>
138+ Ключ и значение удалены:
139+ </td>
140+ <td>
141+ <span class="key-deleted">sso.vaultEnv.hotels-sso.mapping[0].APP_URL</span>
142+ </td>
143+ <td>
144+ <span class="value-deleted">http://my-api.my-domain.com</span>
145+ </td>
146+ </tr>
147+ <tr>
148+ <td>
149+ Ключ удалён, значение неизвестно:
150+ </td>
151+ <td>
152+ <span class="key-deleted">air.vaultEnv.air-sso:</span>
153+ </td>
154+ <td>
155+ <span class="value-unknown">unknown</span>
156+ </td>
157+ </tr>
114158 </tbody>
115159 </table>
116160 </div>
@@ -119,7 +163,8 @@
119163 <br>
120164 <p>
121165 Для экономии узлов в DOM-дереве можно не создавать отдельную обёртку &lt;span&gt;...&lt;/span&gt;
122− а вешать эти классы прям на ячейки таблицы, или на любого другого родителя:
166+ а вешать эти классы прям на ячейки таблицы, или на любого другого родителя.
167+ Работает со всеми классами кроме <b>.value-unknown</b> -- это отдельный компонент.
123168 </p>
124169
125170 <div class="table">
@@ -158,6 +203,28 @@
158203 http://my-api.my-domain.com
159204 </td>
160205 </tr>
206+ <tr>
207+ <td>
208+ Ключ и значение удалены:
209+ </td>
210+ <td class="key-deleted">
211+ sso.vaultEnv.hotels-sso.mapping[0].APP_URL
212+ </td>
213+ <td class="value-deleted">
214+ http://my-api.my-domain.com
215+ </td>
216+ </tr>
217+ <tr>
218+ <td>
219+ Ключ удалён, значение неизвестно:
220+ </td>
221+ <td class="key-deleted">
222+ air.vaultEnv.air-sso:
223+ </td>
224+ <td>
225+ <span class="value-unknown">unknown</span>
226+ </td>
227+ </tr>
161228 </tbody>
162229 </table>
163230 </div>
@@ -199,6 +266,22 @@
199266 <span class="key-custom-edited">app_api_url:</span> <span class="value-edited">http://my-api.my-domain.com</span>
200267 </td>
201268 </tr>
269+ <tr>
270+ <td>
271+ Ключ и значение удалены:
272+ </td>
273+ <td>
274+ <span class="key-deleted">sso.vaultEnv.hotels-sso.mapping[0].APP_URL</span> <span class="value-deleted">http://my-api.my-domain.com</span>
275+ </td>
276+ </tr>
277+ <tr>
278+ <td>
279+ Ключ удалён, значение неизвестно:
280+ </td>
281+ <td>
282+ <span class="key-deleted">air.vaultEnv.air-sso:</span> <span class="value-unknown">unknown</span>
283+ </td>
284+ </tr>
202285 </tbody>
203286 </table>
204287 </div>
@@ -236,6 +319,22 @@
236319 <span class="key-custom-edited">app_api_url: </span><span class="value-edited">http://my-api.my-domain.com</span>
237320 </td>
238321 </tr>
322+ <tr>
323+ <td>
324+ Ключ и значение удалены:
325+ </td>
326+ <td>
327+ <span class="key-deleted">sso.vaultEnv.hotels-sso.mapping[0].APP_URL </span><span class="value-deleted">http://my-api.my-domain.com</span>
328+ </td>
329+ </tr>
330+ <tr>
331+ <td>
332+ Ключ удалён, значение неизвестно:
333+ </td>
334+ <td>
335+ <span class="key-deleted">air.vaultEnv.air-sso: </span><span class="value-unknown">unknown</span>
336+ </td>
337+ </tr>
239338 </tbody>
240339 </table>
241340 </div>
octopod-css/development/styles/_key-deleted.cssnew file+6
@@ -0,0 +1,6 @@
1+.key-deleted {
2+ font-weight: 300 !important;
3+ font-style: italic !important;
4+ text-decoration: line-through;
5+ color: #D3D3D3;
6+}
octopod-css/development/styles/_value-deleted.cssnew file+5
@@ -0,0 +1,5 @@
1+.value-deleted {
2+ font-weight: 300 !important;
3+ text-decoration: line-through;
4+ color: #D3D3D3;
5+}
octopod-css/development/styles/_value-unknown.cssnew file+12
@@ -0,0 +1,12 @@
1+.value-unknown {
2+ display: inline-block;
3+ vertical-align: baseline;
4+ width: 92px;
5+ height: 0.5715em;
6+ background-color: #F3F3F3;
7+ border-radius: 2px;
8+ margin-right: 4px;
9+ text-indent: 200%;
10+ white-space: nowrap;
11+ overflow: hidden;
12+}
octopod-css/development/styles/style.css+5
@@ -43,6 +43,10 @@
4343@import url("_key-default-pristine.css");
4444@import url("_key-default-edited.css");
4545@import url("_key-custom-edited.css");
46+@import url("_key-deleted.css");
47+@import url("_value-pristine.css");
48+@import url("_value-edited.css");
49+@import url("_value-deleted.css");
4650@import url("_value-pristine.css");
4751@import url("_value-edited.css");
4852@import url("_collapse.css");
@@ -50,3 +54,4 @@
5054@import url("_padded.css");
5155@import url("_has-changes.css");
5256@import url("_editable-row.css");
57+@import url("_value-unknown.css");