Startsida Utforska Hjälp
Registrera dig Logga in
benjamin.harris
/
social-media-manager
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

ui updates, tailwindcss and fortawesome support

mehmet.kirkoca 2 år sedan
förälder
f0901f38a7
incheckning
857506ffff
11 ändrade filer med 977 tillägg och 139 borttagningar
Delad Vy Visa Diff Statistik
  1. 1 1
      ui/index.html
  2. 886 50
      ui/package-lock.json
  3. 7 0
      ui/package.json
  4. 6 0
      ui/postcss.config.js
  5. 4 0
      ui/src/App.vue
  6. 14 0
      ui/src/components/Footer.vue
  7. 7 0
      ui/src/components/NavBar.vue
  8. 30 7
      ui/src/components/PostSender.vue
  9. 8 1
      ui/src/main.ts
  10. 3 80
      ui/src/style.css
  11. 11 0
      ui/tailwind.config.js

+ 1 - 1
ui/index.html
Visa fil 

@@ -5,7 +5,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Social Media Manager</title>
 
   </head>
 
-  <body>
 
+  <body class="bg-gray-100">
 
     <div id="app"></div>
 
     <script type="module" src="/src/main.ts"></script>
 
   </body>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 886 - 50
ui/package-lock.json


+ 7 - 0
ui/package.json
Visa fil 

@@ -9,11 +9,18 @@
 
     "preview": "vite preview"
 
   },
 
   "dependencies": {
 
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
 
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
 
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
 
+    "@fortawesome/vue-fontawesome": "^3.0.3",
 
     "axios": "^1.4.0",
 
     "vue": "^3.3.4"
 
   },
 
   "devDependencies": {
 
     "@vitejs/plugin-vue": "^4.2.3",
 
+    "autoprefixer": "^10.4.15",
 
+    "postcss": "^8.4.29",
 
+    "tailwindcss": "^3.3.3",
 
     "typescript": "^5.0.2",
 
     "vite": "^4.4.5",
 
     "vue-tsc": "^1.8.5"

+ 6 - 0
ui/postcss.config.js
Visa fil 

@@ -0,0 +1,6 @@
 
+export default {
 
+  plugins: {
 
+    tailwindcss: {},
 
+    autoprefixer: {},
 
+  },
 
+}

+ 4 - 0
ui/src/App.vue
Visa fil 

@@ -1,9 +1,13 @@
 
 <script setup lang="ts">
 
 import PostSender from './components/PostSender.vue'
 
+import NavBar from './components/NavBar.vue'
 
+import Footer from './components/Footer.vue';
 
 </script>
 
 
 <template>
 
+  <NavBar/>
 
   <PostSender/>
 
+  <Footer/>
 
 </template>
 
 
 <style scoped>

+ 14 - 0
ui/src/components/Footer.vue
Visa fil 

@@ -0,0 +1,14 @@
 
+<template>
 
+  <footer class="fixed bottom-0 w-full bg-gray-800 py-4">
 
+    <div class="container mx-auto text-left text-white">
 
+      <a target="_blank" href="https://github.com/mehmetkirkoca/social-media-manager" class="text-white hover:text-blue-500">
 
+        <font-awesome-icon :icon="['fab', 'github']" class="mr-1"/> 
+        GitHub Repo
 
+      </a>
 
+    </div>
 
+  </footer>
 
+</template>
 
+
 
+<style scoped>
 
+/* Your component-specific styles */
 
+</style>

+ 7 - 0
ui/src/components/NavBar.vue
Visa fil 

@@ -0,0 +1,7 @@
 
+<template>
 
+    <nav class="bg-blue-500 p-4">
 
+        <div class="container mx-auto flex justify-between items-center">
 
+          <a href="#" class="text-white font-semibold text-lg">Social Media Manager</a>
 
+        </div>
 
+    </nav>
 
+</template>

+ 30 - 7
ui/src/components/PostSender.vue
Visa fil 

@@ -1,15 +1,33 @@
 
 <template>
 
-  <div>
 
-    <textarea v-model="message" id="message"></textarea>
 
-    <button @click="sendMessage">Send Message</button>
 
+  <div class="container mx-auto mt-4 p-4">
 
+    <div class="grid grid-cols-1 gap-4">
 
+      <label for="message" class="block font-medium mb-2">Your Post:</label>
 
+      <textarea class="textarea-input" v-model="message" id="message" placeholder="Write your message here"></textarea>
 
+      <button class="blueBtn" @click="sendMessage">Post Your Message</button>
 
+    </div>
 
+    <h2 class="m-3 text-lg">Formatted Posts</h2>
 
+    <div class="grid grid-cols-2 gap-4 m-4 border-y-4">
 
+      <div class="p-4">
 
+        <label for="twitter" class="block font-medium mb-2">Twitter Post:</label>
 
+        <textarea class="textarea-input" v-model="twitter" id="twitter" placeholder="Compose your tweet"></textarea>
 
+        <button class="blueBtn">Post to Twitter</button>
 
+      </div>
 
+      <div class="p-4">
 
+        <label for="linkedin" class="block font-medium mb-2">LinkedIn Post:</label>
 
+        <textarea class="textarea-input" v-model="linkedin" id="linkedin" placeholder="Write your LinkedIn post"></textarea>
 
+        <button class="blueBtn">Post to LinkedIn</button>
 
+      </div>
 
+    </div>
 
   </div>
 
 </template>
 
 
 <script setup lang="ts">
 
 import { ref } from 'vue';
 
-import axios from 'axios'; // Make sure you have axios installed
 
+import axios from 'axios';
 
 
-const message = ref(''); // Initialize the message data property
 
+const message = ref('');
 
+const twitter = ref('');
 
+const linkedin = ref('');
 
 
 const sendMessage = async () => {
 
   try {
 
@@ -24,5 +42,10 @@ const sendMessage = async () => {
 
 </script>
 
 
 <style scoped>
 
-/* Your component-specific styles */
 
-</style>
 
+.textarea-input {
 
+  @apply p-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500;
 
+}
 
+.blueBtn{
 
+  @apply bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none
 
+}
 
+</style>

+ 8 - 1
ui/src/main.ts
Visa fil 

@@ -1,5 +1,12 @@
 
 import { createApp } from 'vue'
 
 import './style.css'
 
 import App from './App.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
 
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
 
 
-createApp(App).mount('#app')
 
+library.add(faGithub)
 
+
 
+createApp(App)
 
+.component('font-awesome-icon', FontAwesomeIcon)
 
+.mount('#app')

+ 3 - 80
ui/src/style.css
Visa fil 

@@ -1,80 +1,3 @@
 
-:root {
 
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 
-  line-height: 1.5;
 
-  font-weight: 400;
 
-
 
-  color-scheme: light dark;
 
-  color: rgba(255, 255, 255, 0.87);
 
-  background-color: #242424;
 
-
 
-  font-synthesis: none;
 
-  text-rendering: optimizeLegibility;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  -webkit-text-size-adjust: 100%;
 
-}
 
-
 
-a {
 
-  font-weight: 500;
 
-  color: #646cff;
 
-  text-decoration: inherit;
 
-}
 
-a:hover {
 
-  color: #535bf2;
 
-}
 
-
 
-body {
 
-  margin: 0;
 
-  display: flex;
 
-  place-items: center;
 
-  min-width: 320px;
 
-  min-height: 100vh;
 
-}
 
-
 
-h1 {
 
-  font-size: 3.2em;
 
-  line-height: 1.1;
 
-}
 
-
 
-button {
 
-  border-radius: 8px;
 
-  border: 1px solid transparent;
 
-  padding: 0.6em 1.2em;
 
-  font-size: 1em;
 
-  font-weight: 500;
 
-  font-family: inherit;
 
-  background-color: #1a1a1a;
 
-  cursor: pointer;
 
-  transition: border-color 0.25s;
 
-}
 
-button:hover {
 
-  border-color: #646cff;
 
-}
 
-button:focus,
 
-button:focus-visible {
 
-  outline: 4px auto -webkit-focus-ring-color;
 
-}
 
-
 
-.card {
 
-  padding: 2em;
 
-}
 
-
 
-#app {
 
-  max-width: 1280px;
 
-  margin: 0 auto;
 
-  padding: 2rem;
 
-  text-align: center;
 
-}
 
-
 
-@media (prefers-color-scheme: light) {
 
-  :root {
 
-    color: #213547;
 
-    background-color: #ffffff;
 
-  }
 
-  a:hover {
 
-    color: #747bff;
 
-  }
 
-  button {
 
-    background-color: #f9f9f9;
 
-  }
 
-}
 
+@tailwind base;
 
+@tailwind components;
 
+@tailwind utilities;

+ 11 - 0
ui/tailwind.config.js
Visa fil 

@@ -0,0 +1,11 @@
 
+/** @type {import('tailwindcss').Config} */
 
+export default {
 
+  content: [
 
+    "./index.html",
 
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
 
+  ],
 
+  theme: {
 
+    extend: {},
 
+  },
 
+  plugins: [],
 
+}

Vissa filer visades inte eftersom för många filer har ändrats