Merge pull request #53 from tilde-lab/fix_19.05.2020

fix_19.05.2020

Author: blokhin

src/components/JSON/code.scss

@@ -32,6 +32,9 @@ pre[class*='language-'] {
     border-radius: $border-radius !important;
     line-height: 1.5 !important;
     text-shadow: none !important;
+    overflow-wrap: anywhere !important;
+    overflow-y: inherit !important;
+    white-space: pre-wrap !important; 
 }
 
 pre[class*='language-']::selection,
@@ -191,3 +194,38 @@ code[class*='language-'] ::selection {
         color: $gray-color;
     }
 }
+
+[color-scheme='light'] {
+    code[class*='language-'],
+    pre[class*='language-'] {
+        color: lighten($body-font-color, 10%) !important;
+        background: $bg-color !important;
+    }
+
+    pre[class*='language-']::selection,
+    pre[class*='language-'] ::selection,
+    code[class*='language-']::selection,
+    code[class*='language-'] ::selection {
+        background: $highlight-color !important;
+    }
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+        color: $gray-color;
+    }
+
+    .token.punctuation {
+        color: $gray-color;
+    }
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted {
+        color: $gray-color;
+    }
+}

src/components/JSON/jsontree/jsontree.scss

@@ -1,5 +1,28 @@
 @import '../vars.scss';
 
+[color-scheme='light'] {
+    .json-container {
+        .line { 
+            &.click { 
+                &:hover {
+                    background-color: $secondary-color;
+                }
+            }
+        }
+    }
+}
+@media (prefers-color-scheme: dark) {
+    .json-container {
+        .line { 
+            &.click { 
+                &:hover {
+                    background-color: $secondary-color;
+                }
+            }
+        }
+    }
+}
+
 .json-container {
     ::selection {
         text-shadow: none;

src/views/Result.svelte

@@ -3,7 +3,7 @@
 </div>
 <div class="pt-2">
 	<Grid>
-		<Col col="6" md="12">
+		<Col md="12">
 			{#if data}
 				<Input bind:value={filter} placeholder="Field name..." />
 				<small class="form-text text-muted"> Filter data object by field name. </small>
@@ -12,8 +12,8 @@
 				<JSON.Editor style="width: 100%; height: 400px; margin-top: 0;" on:change={(e) => (code = e.detail)} />
 			{/if}
 		</Col>
-		<Divider text={windowWidth <= 600 ? '↓' : '→'} align={windowWidth <= 600 ? 'horizontal center' : 'vertical'} />
-		<Col col="5" md="12">
+		<Divider text={$media.md ? '↓' : '→'} align={$media.md ? 'horizontal center' : 'vertical'} />
+		<Col md="12">
 			<ModuleSelect bind:selectedValue={module} />
 			<br />
 			<Hero size="sm" bg={$darkTheme ? 'dark' : 'gray'}>
@@ -25,21 +25,20 @@
 	</Grid>
 </div>
 
-<svelte:window bind:innerWidth={windowWidth} />
-
 <script lang="ts" context="module">
 	import { Col, Divider, Grid, Hero, Input, Steps } from 'svelte-spectre';
 	import { darkTheme } from '@/stores/theme';
 
 	import ModuleSelect from '@/views/ModuleSelect/ModuleSelect.svelte';
 	import * as JSON from '@/components/JSON';
 
+	import { media } from '@/stores/media';
+
 	const steps = [{ label: 'Optimade JSON' }, { label: 'Optimade app' }];
 </script>
 
 <script lang="ts">
-	export let data: Record<string, never> | null | undefined = null,
-		windowWidth = 0;
+	export let data: Record<string, never> | null | undefined = null;
 
 	let code: string;
 	let module: any;
@@ -77,4 +76,7 @@
 		top: 0;
 		width: 100%;
 	}
+	:global(.modal-fs .modal-container .modal-body .columns hr) {
+		font-weight: bold;
+	}
 </style>