1
0
mirror of https://github.com/kognise/water.css.git synced 2025-08-11 23:54:12 +02:00

fix: don't show [title] if standalone is selected

This commit is contained in:
Jonas Kuske
2019-05-31 00:45:25 +02:00
parent e7012d19c4
commit 0de736c5b7
2 changed files with 72 additions and 24 deletions

48
dist/docs/index.html vendored
View File

@@ -79,8 +79,8 @@
<h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3> <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
<button type="button" @click="copyToClipboard"> <button type="button" @click="copyToClipboard">
<transition> <transition>
<span class="emoji" v-if="copyStatus === 'success'"></span> <span v-if="copyStatus === 'success'" class="emoji"></span>
<span class="emoji" v-else-if="copyStatus === 'failed'"></span> <span v-else-if="copyStatus === 'failed'" class="emoji"></span>
</transition> </transition>
Copy to clipboard Copy to clipboard
</button> </button>
@@ -92,15 +92,27 @@
<h3>Version options:</h3> <h3>Version options:</h3>
<form action="./" method="post" @submit.prevent> <form action="./" method="post" @submit.prevent>
<label title="Selected theme may be overwritten by theme settings on user's device"> <label>
<input type="radio" value="dark" v-model="versionOptions.theme" checked name="theme" /> <input type="radio" value="dark" checked name="theme" v-model="versionOptions.theme" />
Dark theme <span class="emoji">🌙</span> Dark theme <span class="emoji">🌙</span>
<span class="emoji translucent" v-if="!versionOptions.isStandalone"> / ☀</span> <span
v-if="!versionOptions.isStandalone"
class="emoji translucent"
title="Selected theme may be overwritten by theme settings on user's device"
>
/ ☀</span
>
</label> </label>
<label title="Selected theme may be overwritten by theme settings on user's device"> <label>
<input type="radio" value="light" v-model="versionOptions.theme" name="theme" /> <input type="radio" value="light" name="theme" v-model="versionOptions.theme" />
Light theme <span class="emoji"></span> Light theme <span class="emoji"></span>
<span class="emoji translucent" v-if="!versionOptions.isStandalone"> / 🌙</span> <span
v-if="!versionOptions.isStandalone"
class="emoji translucent"
title="Selected theme may be overwritten by theme settings on user's device"
>
/ 🌙</span
>
</label> </label>
<br /><br /> <br /><br />
<label> <label>
@@ -129,18 +141,30 @@
<th>Theme</th> <th>Theme</th>
<td> <td>
<template v-if="versionOptions.isStandalone"> <template v-if="versionOptions.isStandalone">
<span class="emoji" v-if="versionOptions.theme === 'dark'">🌙</span> <span v-if="versionOptions.theme === 'dark'" class="emoji">🌙</span>
<span class="emoji" v-else></span> <span v-else class="emoji"></span>
{{ versionOptions.theme | capitalize }} {{ versionOptions.theme | capitalize }}
</template> </template>
<template v-else> <template v-else>
<span class="emoji" v-if="versionOptions.theme === 'dark'"> <span
v-if="versionOptions.theme === 'dark'"
class="emoji"
title="Selected theme may be overwritten by theme settings on user's device"
>
🌙<span class="translucent"> / ☀</span> 🌙<span class="translucent"> / ☀</span>
</span> </span>
<span class="emoji" v-else><span class="translucent"> / 🌙</span></span> <span
v-else
class="emoji"
title="Selected theme may be overwritten by theme settings on user's device"
>
<span class="translucent"> / 🌙</span></span
>
Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings. Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
(detected via <code>prefers-color-scheme</code>) (detected via <code>prefers-color-scheme</code>)
<template v-if="preferedColorScheme"> <template v-if="preferedColorScheme">
<br />Your device is currently set to {{ preferedColorScheme }} mode. <br />Your device is currently set to {{ preferedColorScheme }} mode.
</template> </template>

View File

@@ -91,8 +91,8 @@
<h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3> <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
<button type="button" @click="copyToClipboard"> <button type="button" @click="copyToClipboard">
<transition> <transition>
<span class="emoji" v-if="copyStatus === 'success'"></span> <span v-if="copyStatus === 'success'" class="emoji"></span>
<span class="emoji" v-else-if="copyStatus === 'failed'"></span> <span v-else-if="copyStatus === 'failed'" class="emoji"></span>
</transition> </transition>
Copy to clipboard Copy to clipboard
</button> </button>
@@ -104,15 +104,27 @@
<h3>Version options:</h3> <h3>Version options:</h3>
<form action="./" method="post" @submit.prevent> <form action="./" method="post" @submit.prevent>
<label title="Selected theme may be overwritten by theme settings on user's device"> <label>
<input type="radio" value="dark" v-model="versionOptions.theme" checked name="theme" /> <input type="radio" value="dark" checked name="theme" v-model="versionOptions.theme" />
Dark theme <span class="emoji">🌙</span> Dark theme <span class="emoji">🌙</span>
<span class="emoji translucent" v-if="!versionOptions.isStandalone"> / ☀</span> <span
v-if="!versionOptions.isStandalone"
class="emoji translucent"
title="Selected theme may be overwritten by theme settings on user's device"
>
/ ☀</span
>
</label> </label>
<label title="Selected theme may be overwritten by theme settings on user's device"> <label>
<input type="radio" value="light" v-model="versionOptions.theme" name="theme" /> <input type="radio" value="light" name="theme" v-model="versionOptions.theme" />
Light theme <span class="emoji"></span> Light theme <span class="emoji"></span>
<span class="emoji translucent" v-if="!versionOptions.isStandalone"> / 🌙</span> <span
v-if="!versionOptions.isStandalone"
class="emoji translucent"
title="Selected theme may be overwritten by theme settings on user's device"
>
/ 🌙</span
>
</label> </label>
<br /><br /> <br /><br />
<label> <label>
@@ -141,18 +153,30 @@
<th>Theme</th> <th>Theme</th>
<td> <td>
<template v-if="versionOptions.isStandalone"> <template v-if="versionOptions.isStandalone">
<span class="emoji" v-if="versionOptions.theme === 'dark'">🌙</span> <span v-if="versionOptions.theme === 'dark'" class="emoji">🌙</span>
<span class="emoji" v-else></span> <span v-else class="emoji"></span>
{{ versionOptions.theme | capitalize }} {{ versionOptions.theme | capitalize }}
</template> </template>
<template v-else> <template v-else>
<span class="emoji" v-if="versionOptions.theme === 'dark'"> <span
v-if="versionOptions.theme === 'dark'"
class="emoji"
title="Selected theme may be overwritten by theme settings on user's device"
>
🌙<span class="translucent"> / ☀</span> 🌙<span class="translucent"> / ☀</span>
</span> </span>
<span class="emoji" v-else><span class="translucent"> / 🌙</span></span> <span
v-else
class="emoji"
title="Selected theme may be overwritten by theme settings on user's device"
>
<span class="translucent"> / 🌙</span></span
>
Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings. Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
(detected via <code>prefers-color-scheme</code>) (detected via <code>prefers-color-scheme</code>)
<template v-if="preferedColorScheme"> <template v-if="preferedColorScheme">
<br />Your device is currently set to {{ preferedColorScheme }} mode. <br />Your device is currently set to {{ preferedColorScheme }} mode.
</template> </template>