For #12 make webpack config

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "sandbox",
+  "version": "1.0.0",
+  "description": "1. django 4.2",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "dev": "webpack --watch --mode development",
+    "prod": "webpack --watch --mode production"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lissa3/medsbox.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/lissa3/medsbox/issues"
+  },
+  "homepage": "https://github.com/lissa3/medsbox#readme",
+  "devDependencies": {
+    "css-loader": "^6.8.1",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.2",
+    "htmx.org": "^1.9.8"
+  }
+}

src/static/css/categs.css → src/assets/css/categs.css

@@ -10,7 +10,6 @@
     text-decoration: none;
     color:inherit;
     padding:3px;
-
 }
 /* all content categs: root-cats */
 .root-cats{
@@ -25,8 +24,7 @@
     opacity: 1;
     transition: all .5s ease-in-out;
   }
-
-  /* recurs children */
+/* recurs children */
 .children {
     display: none;
     list-style: inherit;

src/static/css/comments.css → src/assets/css/comments.css

@@ -31,7 +31,6 @@
     flex-direction: column;
     justify-content: center;
     width:100%;
-
 }
 .form-main > label{
     color:black;
@@ -60,7 +59,6 @@
     background-color:#e9f0ea;
     font-size:0.8em;
 }
-
 /* reply buttons on modile's bg darker and font smaller */
 @media all and (max-width:900px){
     .btn-primary {

src/assets/css/creation.css

@@ -0,0 +1,29 @@
+.circle{
+    width:270px;
+    height:270px;
+    border-radius:50%;
+  }
+  .circle-left{
+    background:#ea605529;
+    /* overflow:hidden; */
+    position:relative;
+  }
+  .circle-right{
+    background:#bacdcb63;
+    right:-80%;
+    position:absolute;
+}
+@media only screen and (max-width: 600px) {
+  .circle{
+      max-width: 150px;
+      max-height: 150px;
+  }
+}
+.image-style-align-left{
+  float:left;
+  margin-right: 10px;
+}
+.image-style-align-right{
+  float:right;
+  margin-left: 10px;
+}

src/static/css/custom_admin.css → src/assets/css/custom_admin.css

@@ -4,7 +4,6 @@
 div.breadcrumbs {
     background:#765037;
 }
-
 module h2, .module caption, .inline-group h2 {
     background: #765037;
 }

src/static/css/editor.css → src/assets/css/editor.css

@@ -1,20 +1,14 @@
-
 /* just for testing */
 .image{
-
     border:1px solid black;
-
-
   }
   .image-style-align-left{
     float:left;
     margin-right: 10px;
-
   }
   .image-style-align-right{
     float:right;
     margin-left: 10px;
-
   }
   /*for post text   */
   .single_post{
@@ -62,14 +56,9 @@
   }
   .single_post__content{
     line-height: 1.4rem;
-
   }
   .single_post__date,.single_post__categ{
     font-size: 16px;
-
   }
 
 }
-
-
-

src/static/css/home.css → src/assets/css/home.css

@@ -21,4 +21,4 @@
         height: 250px;
         width: 250px;
     }
-}
+}

src/assets/css/index.css

@@ -0,0 +1,10 @@
+@import 'bootstrap/dist/css/bootstrap.min.css';
+@import "./sidebars.css";
+@import "./categs.css";
+@import "./styles.css";
+@import "./search.css";
+@import "./editor.css";
+@import "./comments.css";
+@import "./home.css";
+@import "./creation.css";
+@import "./custom_admin.css";

src/static/css/search.css → src/assets/css/search.css

@@ -44,19 +44,6 @@
     width:100%;
     margin-right: .4rem;
 }
-/* .search-txt[type=text] {
-  -webkit-transition: background-color .35s ease-in-out;
-  transition: background-color .35s ease-in-out;
-  -webkit-transition:width .35s ease-in-out;
-  transition: width .35s ease-in-out;
-} */
-/* click 2 times! */
-/* .search-txt[type=text]:focus {
-  width: 200px;
-  background-color: rgba(255,255,255,0.6);
-  border-color:gray;
-} */
-
 .search-box:hover >.search-btn{
     background: white;
 }
@@ -77,7 +64,6 @@
     outline: none;
     border:none;
 }
-
 /* idea:combine a link with button - button for search*/
 .custom-invisible {
     background: transparent;
@@ -122,7 +108,6 @@
 .tag_item{
     cursor: pointer;
 }
-
 /* end tags search  */
 /* start categ search  */
 .categ_item{
@@ -132,7 +117,6 @@
     background-color: #b1c3b28a;
     border-radius: 10px;
 }
-
 /* end categs search  */
 
 /* msg above search form */

src/static/css/sidebars.css → src/assets/css/sidebars.css

@@ -8,7 +8,6 @@
     background-color:#5e5451;
     overflow-x: hidden; /* Disable horizontal scroll */
     padding-top: 20px;
-
   }
   /* position: fixed;  */
 
@@ -25,13 +24,11 @@
   .sidenav a:hover {
     color: #f1f1f1;
   }
-
-  /* Style page content */
+/* Style page content */
   .main {
     margin-left: 160px; /* Same as the width of the sidebar */
     padding: 0px 10px;
   }
-
   /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
   @media screen and (max-height: 450px) {
     .sidenav {padding-top: 15px;}
@@ -145,13 +142,9 @@ scroll to top button
     padding:0.5rem;
     font-size: 1.5rem;
 }
-
-
 }
 @media (max-width: 767px) {
   .hidden-mobile {
     display: none;
   }
 }
-
-

src/static/css/styles.css → src/assets/css/styles.css

@@ -1,6 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300&family=Merriweather:wght@300&display=swap');
-/* @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300&family=Barlow:wght@300&family=Merriweather:wght@300&display=swap');  */
 :root {
   --form-control-color: rgb(66, 62, 69);
 }
@@ -16,7 +13,7 @@ body padding-top: 165px;
 html,body{
   margin:0;
   padding: 0;
-  background-color:#f0e1cd;
+  background-color:#efe8de;
   font-family:"Poppins",sans-serif;
   height: 100%;
 }
@@ -525,7 +522,3 @@ Pagination
       padding:0 .5rem;
   }
 }
-
-
-
-

src/assets/scripts/bookmarks.js

@@ -0,0 +1,39 @@
+import { getCookie } from "./utils";
+// bookmarks
+const jsBox = document.getElementById("jsBox");
+const bmarkDiv = document.getElementById("bmarkDiv");
+const formBook = document.querySelector("#bookmark");
+if(bmarkDiv){
+const fd = new FormData();
+fd.append("csrfmiddlewaretoken",getCookie("csrftoken"))
+formBook.addEventListener("submit",(e)=>{
+  e.preventDefault();
+  const url = formBook.getAttribute("action");
+  fd.append("post_uuid",formBook.post_uuid.value),
+  fd.append("user_id",formBook.user_id.value)
+  fetch(url,{
+    method:"POST",
+    headers:{ "x-requested-with": "XMLHttpRequest"},
+    body:fd
+    }).then((resp)=>resp.json())
+      .then((data)=>{
+        if(data.status_code ===200){
+          let msg = data.msg;
+          jsBox.classList.add("green","slide");
+          jsBox.textContent=  msg;
+          if(data.del_button){
+            bmarkDiv.remove();
+          }
+        }
+        else if(data.status_code ===404){
+          //  add error flash msg
+            jsBox.classList.add("red","slide");
+            jsBox.textContent= "Failed to add to bookmarks";
+           throw new Error(message="Failed to add to bookmarks");
+          }
+      })
+      .catch((err)=>{
+        console.log(err["message"]);
+      })
+})
+}

src/assets/scripts/categs.js

@@ -0,0 +1,40 @@
+//click button Categories-> toggle categs
+document.addEventListener('click',(e)=>{
+    let isCategBut = e.target.matches("[data-dropdown-but]");
+      if(!isCategBut&&e.target.closest("[data-dropdown]")!=null){
+         return
+      }
+      if(isCategBut){
+        // click button will show<->hide all categories
+        const but = document.getElementById("show-cats")
+        const ulMenu = document.querySelector(".root-cats");
+        if(!but.classList.contains('hide')){
+          but.classList.add("hide")
+          but.innerHTML="Show Categories";
+          ulMenu.classList.remove("to-show")
+        }else{
+          but.classList.remove('hide')
+          but.innerHTML="Hide categories";
+          ulMenu.classList.add("to-show");
+        }
+      }
+    });
+      // help func to outroll (sub)categs;
+      //maybe: custom click event(?)
+      // by now: mouseover -> outroll categs; click -> make request
+      let catSideBar = document.querySelector(".root-cats");
+      if(catSideBar){
+        catSideBar.addEventListener("mouseover",(e)=>{
+            const isDropDownLink = e.target.matches('[data-dropdown-link]');
+            if(!isDropDownLink&&e.target.closest("[data-li]")!=null){
+              return
+            }
+            if(isDropDownLink){
+              // get ul children (sibling "a" tag enbed in "li")
+              let currentDropDown = e.target.nextElementSibling;
+              // e.target is a a tag node-link to-toggle
+              currentDropDown.classList.add("to-block");
+        }
+    })
+}
+