LunaDev
/
kara
1
1
Fork 0
Code Issues 14 Releases 1 Wiki Activity
Browse Source

New responsive design which is mobile first.

master
Nero Ignis 5 years ago
parent
5214f5d985
commit
53d630a0f4
4 changed files with 110 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .idea/kara.iml
  2. 23
      .idea/workspace.xml
  3. 35
      app.css
  4. 122
      index.html

3
.idea/kara.iml
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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;
}

122
index.html
Unescape View File

@ -1,66 +1,66 @@ @@ -1,66 +1,66 @@
<!DOCTYPE html>
<html>
<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">
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">
{{ message.body }}
<br/>
</div>
<div class="message user-message float-right" v-else="">
{{ message.body }}
<br/>
</div>
</template>
<div class="message ai-message typing float-left" v-if="isTyping">
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">
Loading...
</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">
Loading...
</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">
Loading...
</span>
</div>
</div>
</div>
</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>
<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-fluid" id="kara">
<h5 id="kara-banner">
Kara
</h5>
<div id="chat-box">
<template v-for="message in messages">
<div class="message ai-message float-left" v-if="message.ai">
{{ message.body }}
<br/>
</div>
<div class="message user-message float-right" v-else="">
{{ message.body }}
<br/>
</div>
</template>
<div class="message ai-message typing float-left" v-if="isTyping">
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">
Loading...
</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">
Loading...
</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">
Loading...
</span>
</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>
<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>
<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>

Write Preview
Loading…
Cancel
Save