Layout adjustments
This commit is contained in:
		| @@ -30,7 +30,7 @@ function toggleTooltips() { | |||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <template> | <template> | ||||||
|     <div :class="{ 'w-1/2' : !areTooltipsHidden }" class="flex items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900"> |     <div :class="{ 'w-4/12' : !areTooltipsHidden }" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900"> | ||||||
|         <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()"> |         <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()"> | ||||||
|             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s |             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s | ||||||
|         </button> |         </button> | ||||||
|   | |||||||
| @@ -31,7 +31,7 @@ function entryHasExamples() { | |||||||
|                 </p> |                 </p> | ||||||
|             </span> |             </span> | ||||||
|              |              | ||||||
|             <h4 v-if="entryHasArguments()" class="text-xl mt-4 mb-2 font-bold">Arguments</h4> |             <h4 class="text-xl mt-4 mb-2 font-bold">Args and Output</h4> | ||||||
|             <table v-if="entryHasArguments()" class="w-full"> |             <table v-if="entryHasArguments()" class="w-full"> | ||||||
|                 <tr> |                 <tr> | ||||||
|                     <th>Type</th> |                     <th>Type</th> | ||||||
| @@ -42,7 +42,10 @@ function entryHasExamples() { | |||||||
|                     <td class="text-center">{{ arg.description }}</td> |                     <td class="text-center">{{ arg.description }}</td> | ||||||
|                 </tr> |                 </tr> | ||||||
|             </table> |             </table> | ||||||
|             <strong>Output: </strong>{{ props.entryData.output }} |             <div class="mt-2"> | ||||||
|  |                 <strong>Output: </strong>{{ props.entryData.output }} | ||||||
|  |             </div> | ||||||
|  |              | ||||||
|  |  | ||||||
|             <h4 v-if="entryHasExamples()" class="text-xl mt-4 mb-2 font-bold">Example</h4> |             <h4 v-if="entryHasExamples()" class="text-xl mt-4 mb-2 font-bold">Example</h4> | ||||||
|             <table v-if="entryHasExamples()" class="w-full"> |             <table v-if="entryHasExamples()" class="w-full"> | ||||||
| @@ -51,11 +54,11 @@ function entryHasExamples() { | |||||||
|                     <th>Output</th> |                     <th>Output</th> | ||||||
|                 </tr> |                 </tr> | ||||||
|                 <tr v-for="ex in props.entryData.examples"> |                 <tr v-for="ex in props.entryData.examples"> | ||||||
|                     <td class="text-center">{{ ex.command }}</td> |                     <td class="text-center"><code>{{ ex.command }}</code></td> | ||||||
|                     <td class="text-center">{{ ex.output }}</td> |                     <td class="text-center">{{ ex.output }}</td> | ||||||
|                 </tr> |                 </tr> | ||||||
|             </table> |             </table> | ||||||
|             <div> |             <div class="mt-2"> | ||||||
|                 <a :href="props.entryData.documentationReferenceURL" class="underline" target="_blank" rel="noreferrer noopener">W3C Documentation Reference</a> |                 <a :href="props.entryData.documentationReferenceURL" class="underline" target="_blank" rel="noreferrer noopener">W3C Documentation Reference</a> | ||||||
|             </div> |             </div> | ||||||
|              |              | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user