Browse Source

New responsive design which is mobile first.

master
Nero Ignis 5 years ago
parent
commit
53d630a0f4
  1. 3
      .idea/kara.iml
  2. 23
      .idea/workspace.xml
  3. 35
      app.css
  4. 52
      index.html

3
.idea/kara.iml

@ -4,5 +4,8 @@ @@ -4,5 +4,8 @@
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="vue" level="application" />
<orderEntry type="library" name="jquery-3.5.1" level="application" />
<orderEntry type="library" name="bootstrap" level="application" />
</component>
</module>

23
.idea/workspace.xml

@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
</component>
<component name="ChangeListManager">
<list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/kara.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/kara.iml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app.css" beforeDir="false" afterPath="$PROJECT_DIR$/app.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
@ -45,7 +46,7 @@ @@ -45,7 +46,7 @@
<workItem from="1597264411672" duration="27000" />
<workItem from="1597264469454" duration="594000" />
<workItem from="1597346228730" duration="1851000" />
<workItem from="1597348092890" duration="2704000" />
<workItem from="1597348092890" duration="4176000" />
</task>
<task id="LOCAL-00001" summary="Adds gitignore.">
<created>1597348071361</created>
@ -61,7 +62,14 @@ @@ -61,7 +62,14 @@
<option name="project" value="LOCAL" />
<updated>1597350180316</updated>
</task>
<option name="localTasksCounter" value="3" />
<task id="LOCAL-00003" summary="Restyling.">
<created>1597350867239</created>
<option name="number" value="00003" />
<option name="presentableId" value="LOCAL-00003" />
<option name="project" value="LOCAL" />
<updated>1597350867239</updated>
</task>
<option name="localTasksCounter" value="4" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -70,25 +78,26 @@ @@ -70,25 +78,26 @@
<component name="VcsManagerConfiguration">
<MESSAGE value="Adds gitignore." />
<MESSAGE value="Add message filters;&#10;Add responsiveness;&#10;Remove disabled input while Kara types;&#10;Does not send empty messages;" />
<option name="LAST_COMMIT_MESSAGE" value="Add message filters;&#10;Add responsiveness;&#10;Remove disabled input while Kara types;&#10;Does not send empty messages;" />
<MESSAGE value="Restyling." />
<option name="LAST_COMMIT_MESSAGE" value="Restyling." />
</component>
<component name="WindowStateProjectService">
<state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557">
<screen x="0" y="0" width="1366" height="720" />
</state>
<state x="278" y="2" width="800" height="718" key="#Plugins/0.0.1366.720@0.0.1366.720" timestamp="1597350105557" />
<state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597350180268">
<state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597350867190">
<screen x="0" y="0" width="1366" height="720" />
</state>
<state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597350180268" />
<state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597350867190" />
<state x="172" y="0" key="SettingsEditor" timestamp="1597347922296">
<screen x="0" y="0" width="1366" height="720" />
</state>
<state x="172" y="0" key="SettingsEditor/0.0.1366.720@0.0.1366.720" timestamp="1597347922296" />
<state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597350182410">
<state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597350869458">
<screen x="0" y="0" width="1366" height="720" />
</state>
<state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597350182410" />
<state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597350869458" />
<state x="0" y="0" width="616" height="720" key="find.popup" timestamp="1597346688624">
<screen x="0" y="0" width="1366" height="720" />
</state>

35
app.css

@ -1,8 +1,12 @@ @@ -1,8 +1,12 @@
body {
margin: 15px;
padding: 0;
}
#kara {
margin: 2em auto auto auto;
width: 50em;
max-width: 99%;
max-height: 100%;
margin: 0;
padding: 0;
width: auto;
color: white;
}
@ -29,6 +33,27 @@ @@ -29,6 +33,27 @@
}
#chat-box {
margin-top: 4em;
overflow-y: scroll;
height: 25em;
height: 75vh;
}
#chatbox-wrapper {
position: fixed;
padding: 1em;
bottom: 0;
left: 0;
right: 0;
background-color: darkcyan;
}
#kara-banner {
position: fixed;
height: 2.5em;
top: 0;
left: 0;
right: 0;
text-align: center;
padding: 0.7em;
background-color: darkcyan;
}

52
index.html

@ -1,24 +1,20 @@ @@ -1,24 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<head>
<title>
Kara
</title>
<link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="app.css" rel="stylesheet" type="text/css"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name="viewport">
</head>
<body>
<div class="container" id="kara">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h5 class="text-center">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
name="viewport">
</head>
<body>
<div class="container-fluid" id="kara">
<h5 id="kara-banner">
Kara
</h5>
</div>
<div class="card-body">
<div id="chat-box">
<template v-for="message in messages">
<div class="message ai-message float-left" v-if="message.ai">
@ -48,19 +44,23 @@ @@ -48,19 +44,23 @@
</div>
</div>
</div>
<div id="chatbox-wrapper">
<input
autofocus="true"
class="form-control"
id="chatinput"
type="text"
v-model="chatbox"
v-on:keyup.enter="sendMessage()"
required autofocus>
</div>
<div class="card-footer">
<input autofocus="true" class="form-control" id="chatinput" type="text" v-model="chatbox" v-on:keyup.enter="sendMessage()" required autofocus>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script src="app.js">
</script>
</body>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script src="app.js">
</script>
</body>
</html>

Loading…
Cancel
Save