fix global css in index.html

README.md

@@ -4,20 +4,18 @@
 
 # sqliteviz
 
-Sqliteviz is a single-page PWA for fully client-side visualisation of SQLite databases or CSV files.
+Sqliteviz is a single-page offline-first PWA for fully client-side visualisation of SQLite databases or CSV files.
 
-This application allows to:
-- run SQL queries in SQLite database and create all kinds of charts based on result set
-- import CSV file into SQLite database and visualize imported data
-- save queries and chart settings
+With sqliteviz you can:
+- run SQL queries against a SQLite database and create [Plotly][11] charts based on the result sets
+- import a CSV file into a SQLite database and visualize imported data
+- manage queries and chart settings and run them against different databases
 - import/export queries and chart settings to/from a JSON file
-- manipulate saved queries (rename, duplicate, delete)
-- set predefined queries available for all users of sqliteviz on your server (read more about predefind queries on [Wiki][10])
-- export modified SQLite database
-- use it offline
+- export a modified SQLite database
+- use it offline from your OS application menu like any other desktop app
 
-## Get started
-The latest release of sqliteviz is running on [Github pages][6]. The simplest way to start is to use sqliteviz there.
+## Quickstart
+The latest release of sqliteviz is deployed on GitHub Pages at [lana-k.github.io/sqliteviz][6].
 
 ## Wiki
 For user documentation, check out sqliteviz [Wiki][7].
@@ -33,8 +31,9 @@ It is built on top of [react-chart-editor][3], [sql.js][4] and [Vue-Codemirror][
 [3]: https://github.com/plotly/react-chart-editor
 [4]: https://github.com/sql-js/sql.js
 [5]: https://github.com/vuejs/vue
-[6]: https://lana-k.github.io/sqliteviz
+[6]: https://lana-k.github.io/sqliteviz/
 [7]: https://github.com/lana-k/sqliteviz/wiki
 [8]: https://github.com/surmon-china/vue-codemirror#readme
 [9]: https://www.papaparse.com/
 [10]: https://github.com/lana-k/sqliteviz/wiki/Predefined-queries
+[11]: https://github.com/plotly/plotly.js

public/index.html

@@ -8,7 +8,7 @@
     <link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
-      #loading-wrapper {
+      #sqliteviz-loading-wrapper {
         position: fixed;
         width: 100%;
         height: 100%;
@@ -17,7 +17,7 @@
         background-color: white;
       }
     
-      #loading-text {
+      #sqliteviz-loading-text {
         display: block;
         position: absolute;
         top: 50%;
@@ -28,7 +28,7 @@
         font-size: 20px;
       }
       
-      .svg-container {
+      #sqliteviz-loading-wrapper svg {
         display: block;
         position: absolute;
         left: 50%;
@@ -36,7 +36,7 @@
         transform: translate(-50%, -50%);
       }
 
-      .loader-svg {
+      #sqliteviz-loading-wrapper circle {
         position: absolute;
         left: 0; right: 0; top: 0; bottom: 0;
         fill: none;
@@ -45,16 +45,16 @@
         stroke: #119DFF;
       }
 
-      .loader-svg.bg {
+      #sqliteviz-loading-wrapper circle.bg {
         stroke: #C8D4E3;
       }
 
-      .loader-svg.front {
+      #sqliteviz-loading-wrapper circle.front {
         stroke-dasharray: 402px;
-        animation: loading 2s linear 0s infinite;
+        animation: sqliteviz-loading 2s linear 0s infinite;
       }
 
-      @keyframes loading {
+      @keyframes sqliteviz-loading {
         0% {
           stroke-dasharray: 100px 402px;
           stroke-dashoffset: 0;
@@ -75,17 +75,17 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app">
-      <div id="loading-wrapper">
-        <div id="loading-text">LOADING</div>
-        <svg class="svg-container" height="170" width="170" viewBox="0 0 170 170">
+      <div id="sqliteviz-loading-wrapper">
+        <div id="sqliteviz-loading-text">LOADING</div>
+        <svg height="170" width="170" viewBox="0 0 170 170">
           <circle
-            class="loader-svg bg"
+            class="bg"
             cx="85"
             cy="85"
             r="80"
           />
           <circle
-            class="loader-svg front"
+            class="front"
             cx="85"
             cy="85"
             r="80"

src/components/LoadingIndicator.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg :class="['svg-container', animationClass ]" height="20" width="20" viewBox="0 0 20 20">
+  <svg :class="animationClass" height="20" width="20" viewBox="0 0 20 20">
     <circle
       class="loader-svg bg"
       cx="10"