From b069df452cd79ead120406a4020dcb0a5ee88e6a Mon Sep 17 00:00:00 2001
From: Peter Howell <peter.howell@gmail.com>
Date: Mon, 21 Jul 2025 11:41:18 -0700
Subject: [PATCH] 'styling'

---
 js/dir_app.js | 448 +++++++++++++++++++++++++++++++++++---------------
 style.css     |   3 +-
 2 files changed, 319 insertions(+), 132 deletions(-)

diff --git a/js/dir_app.js b/js/dir_app.js
index b2795aa..0e300c7 100644
--- a/js/dir_app.js
+++ b/js/dir_app.js
@@ -101,8 +101,18 @@ const TQuestion = Vue.component('field', {
     "answer": function(val,Oldval) { this.a = val },
     "a": function (val, oldVal) { 
         this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid]) },  },
-  template: `<div class="pure-control-group"><label v-if="this.question" :for="this.qid" class="question">{{ question }}</label>
-        <input :id="this.qid" type="text" class="form-control" v-model="a" :placeholder="placeholder" /></div>`, 
+  template: `<div class="mb-4">
+    <label v-if="question" :for="qid" class="block text-sm font-medium text-gray-700 mb-1">
+      {{ question }}
+    </label>
+    <input
+      :id="qid"
+      type="text"
+      v-model="a"
+      :placeholder="placeholder"
+      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 p-2 text-sm"
+    />
+  </div>`, 
 })
 
 // A single INLINE text style question
@@ -144,8 +154,17 @@ const TAQuestion = Vue.component('tfield', {
       this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid])  },
     "answer": function (val, oldVal) { this.a = val }, 
   },
-  template: `<div class="pure-control-group"><label :for="this.qid" class="question">{{ question }} </label>
-        <textarea :id="this.qid" :class="this.myclass" v-model="a"></textarea></div>` })
+  template: `<div class="mb-4">
+    <label :for="qid" class="block text-sm font-medium text-gray-700 mb-1">
+      {{ question }}
+    </label>
+    <textarea
+      :id="qid"
+      v-model="a"
+      :class="myclass"
+      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 p-2 text-sm"
+    ></textarea>
+  </div>` })
 
 
 
@@ -162,7 +181,7 @@ const HTAQuestion = Vue.component('htfield', {
     watch: { 
         "answer": function (val, oldVal) { this.p.content.innerHTML = val }, },
     template: `<div><label :for="this.qid" class="question">{{ question }} </label>
-    <div :id="this.qid" class="pure-control-group pell"></div></div>` })
+    <div :id="this.qid" class="pell"></div></div>` })
 
 // long format text WYSIWYG HTML      FORM ALIGNED STYLE
 const HTAQuestionFA = Vue.component('htfield_fa', {
@@ -176,8 +195,8 @@ const HTAQuestionFA = Vue.component('htfield_fa', {
         self.p.content.innerHTML = self.answer },
     watch: { 
         "answer": function (val, oldVal) { this.p.content.innerHTML = val }, },
-    template: `<div class="pure-control-group"><label :for="this.qid" class="question">{{ question }} </label>
-    <div :id="this.qid" class="pure-control-group form-control pell"></div></div>` })
+    template: `<div class=""><label :for="this.qid" class="question">{{ question }} </label>
+    <div :id="this.qid" class="form-control pell"></div></div>` })
 
 // A single numeric question    
 const NQuestioon = Vue.component('n-question', {
@@ -243,9 +262,20 @@ const SelMenu = Vue.component('selectmenu', {
     "a": function (val, oldVal) { 
       this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid])  },
     "answer": function (val, oldVal) { this.a = val },  },
-  template: `<select :id="this.qid" v-model="a" class="pure-input-1-12">
-    <option v-for="o in this.$root[menu]" :value="o.id">{{o[labelfield]}}</option>
-  </select>` })
+  template: `<div class="mb-4">
+    <label :for="qid" class="block text-sm font-medium text-gray-700 mb-1">
+      {{ question }}
+    </label>
+    <select
+      :id="qid"
+      v-model="a"
+      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 p-2 text-sm bg-white"
+    >
+      <option v-for="o in $root[menu]" :value="o.id">
+        {{ o[labelfield] }}
+      </option>
+    </select>
+  </div>` })
 
 
 // Select menu    FORM ALIGNED STYLE
@@ -256,10 +286,20 @@ const SelMenuFA = Vue.component('selectmenu_fa', {
     "a": function (val, oldVal) { 
       this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid])  },
     "answer": function (val, oldVal) { this.a = val },  },
-  template: `<div class="pure-control-group"><label :for="this.qid" class="question">{{ question }} </label>
-  <select :id="this.qid" v-model="a" class="form-control pure-input-1-12">
-    <option v-for="o in this.$root[menu]" :value="o.id">{{o[labelfield]}}</option>
-  </select></div>` })
+  template: `<div class="mb-4">
+    <label :for="qid" class="block text-sm font-medium text-gray-700 mb-1">
+      {{ question }}
+    </label>
+    <select
+      :id="qid"
+      v-model="a"
+      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 p-2 text-sm bg-white"
+    >
+      <option v-for="o in $root[menu]" :value="o.id">
+        {{ o[labelfield] }}
+      </option>
+    </select>
+  </div>` })
 
 
 // A date time picker
@@ -272,8 +312,18 @@ const DTPicker = Vue.component('dtpicker', {
     "answer": function(val,Oldval) { this.a = val },
     "a": function (val, oldVal) { 
         this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid]) },  },
-  template: `<div class="pure-control-group"><label v-if="this.question" :for="this.qid" class="question">{{ question }}</label>
-        <input type="datetime-local" :id="this.qid" class="form-control" v-model="a" step="300" /></div>`,
+  template: `<div class="mb-4">
+    <label v-if="question" :for="qid" class="block text-sm font-medium text-gray-700 mb-1">
+      {{ question }}
+    </label>
+    <input
+      type="datetime-local"
+      :id="qid"
+      v-model="a"
+      step="300"
+      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 p-2 text-sm"
+    />
+  </div>`,
 })
 
 
@@ -655,7 +705,7 @@ const ActivityEditor = Vue.component('activityedit', {
                    function(r2) { 
                    self.everyone = r2.users
                    _.each( self.everyone, function(x) {
-                            x.hostid = x.id } )
+                            x.hostid = x.hostid } )
                    self.everyname = _.pluck(r2.users,'name') } ) },
       fetch_myevents: function() {
         var self = this;
@@ -669,8 +719,9 @@ const ActivityEditor = Vue.component('activityedit', {
                         self.this_activity.starttime = self.this_activity.starttime.replace(' ','T')} )  
         basic_get('dir_api.php?a=get/hosts',
                    function(r2) { 
-                        self.hosts_by_sesid = _.groupBy(r2,function(x) { return x.id } )
-                        self.this_hosts = self.hosts_by_sesid[ self.my_activity ]
+                        var filtered = r2.filter(x => x.hostid != null)
+                        self.hosts_by_sesid = _.groupBy(filtered,function(x) { return x.id } )
+                        self.this_hosts = self.hosts_by_sesid[ self.my_activity ] 
                         } )  
     },
   },
@@ -703,7 +754,7 @@ const ActivityEditor = Vue.component('activityedit', {
                                        qid="mode" :answer="this_activity.mode" menu="modes_menu" 
                             :targetid="this_activity.id" question="What mode?"  labelfield="string"></selectmenu_fa>
                         <field myclass="double" table="conf_sessions" qid="length" :answer="this_activity.length" 
-                            :targetid="this_activity.id" question="Length (in hours)" placeholder="1"></field>
+                            :targetid="this_activity.id" question="Length (in hours or minutes)" placeholder="1"></field>
                         <selectmenu_fa table="conf_sessions" qid="type" :answer="this_activity.type" menu="sessiontypes_menu" 
                             :targetid="this_activity.id" question="Type"  labelfield="type"></selectmenu_fa>
                         <selectmenu_fa v-if="this_activity.type=='101'" table="conf_sessions" 
@@ -712,36 +763,56 @@ const ActivityEditor = Vue.component('activityedit', {
                         <field myclass="double" table="conf_sessions" qid="recording" :answer="this_activity.recording" 
                             :targetid="this_activity.id" question="Recording Link" placeholder=""></field>
                         <br />
-                        <div v-if="!creating"  class="pure-control-group double">
-                            <label class="fake_pcg">Hosts</label>
-                            <div class="fake_pcg">
-                                <span v-for="h in this_hosts">{{h.name}} 
-                                <span class="clicky" v-on:click="remove(h.hostid)">x</span>  <br /></span>
-                            </div>
-                        </div>
-                        <div v-if="!creating" class="pure-control-group double">
-                            <label class="">Add a host</label>
-                            <div class="fake_pcg">
-                                <form autocomplete="off">
-                                <input type="text" id="addhost" name="addhost" class="form-control" 
-                                        v-on:keyup="hostlookup" v-model="host_search_str" />
-                                </form>
-                                <div>
-                                    <span v-for="ho in host_search">{{ho.name}}
-                                    <span class="clicky" v-on:click="add(ho.id)">+</span>  <br /></span>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                        <div v-if="creating" class="pure-control-group double">
-                            <label class=""></label>
-                            <div class="fake_pcg">
-                                <button class="pure-button pure-button-primary form-control" v-on:click="save_new_event">
-                                Create Activity
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+
+
+<!-- Existing Hosts List -->
+<div v-if="!creating" class="mb-4">
+  <label class="block text-sm font-medium text-gray-700 mb-1">Hosts</label>
+  <div class="border rounded-md p-3 bg-gray-50">
+    <i v-if="this_hosts.length==0">type below to add a host</i>
+    <div v-for="h in this_hosts" class="flex items-center justify-between text-sm mb-1">
+      <span>{{ h.name }}</span>
+      <button
+        type="button"
+        @click="remove(h.hostid)"
+        class="text-red-500 hover:text-red-700 font-semibold"
+      >
+        x
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- Add Host Section -->
+<div v-if="!creating" class="mb-4">
+  <label class="block text-sm font-medium text-gray-700 mb-1">Add a host</label>
+  <input
+    type="text"
+    id="addhost"
+    name="addhost"
+    v-model="host_search_str"
+    @keyup="hostlookup"
+    autocomplete="off"
+    class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 p-2 text-sm mb-2"
+  />
+  <div class="border rounded-md p-3 bg-gray-50">
+    <div v-for="ho in host_search" class="flex items-center justify-between text-sm mb-1">
+      <span
+        @click="add(ho.id)"
+        class="clickme">
+        {{ ho.name }}</span>
+      <button
+        type="button"
+        @click="add(ho.id)"
+        class="text-blue-500 hover:text-blue-700 font-semibold"
+      >
+        +
+      </button>
+    </div>
+  </div>
+</div>
+
+</div>
                 </div> 
                 <!--  add:      permissions                      track,                        x day if pd day
                              x  add/remove host               x  New activity                    general list & signup
@@ -835,94 +906,209 @@ const ActivityInlineEditor = Vue.component('activityinlineedit', {
         basic_get('dir_api.php?a=get/hosts',
                    function(r2) { 
                         self.hosts_by_sesid = _.groupBy(r2,function(x) { return x.id } )
-                        self.this_hosts = self.hosts_by_sesid[ self.my_activity ]
+                        var unfiltered = self.hosts_by_sesid[ self.my_activity ] 
+                        self.this_hosts = unfiltered.filter(x => x.hostid != null)
                         } )  
     },
   },
   template: `<div class="">
-                <div v-if="editing" class="pure-g pure-form pure-form-aligned">
-                    <div class="pure-u-5-24">
-                        <a v-on:click.prevent="editing=0" href="#" class="button-inlist-action">Done</a>
-                    </div>
-                    <div class="pure-u-1-24"></div>
-                    <div class="pure-u-23-24">
-                        <field myclass="double" table="conf_sessions" qid="title" :answer="this_activity.title" 
-                                  :targetid="this_activity.id" question="Title" placeholder="Title"></field>
-                        <dtpicker table="conf_sessions" qid="starttime" :answer="this_activity.starttime" 
-                                  :targetid="this_activity.id" question="Starts at"></dtpicker>
-                        <field myclass="double" table="conf_sessions" qid="length" :answer="this_activity.length" 
-                            :targetid="this_activity.id" question="Length (in hours)" placeholder="1"></field>
-                                  
-                        <selectmenu_fa  table="conf_sessions" 
-                                       qid="mode" :answer="this_activity.mode" menu="modes_menu" 
-                            :targetid="this_activity.id" question="What mode?"  labelfield="string"></selectmenu_fa>
-                            
-                        <field myclass="double" table="conf_sessions" qid="location" :answer="this_activity.location" 
-                            :targetid="this_activity.id" question="Location / Zoom" placeholder="Location"></field>
-                        <field myclass="double" table="conf_sessions" qid="location_irl" :answer="this_activity.location_irl" 
-                            :targetid="this_activity.id" question="Location / In Person" placeholder="Location"></field>
-                            
-                        <div v-if="!creating"  class="pure-control-group double">
-                            <label class="fake_pcg">Hosts</label>
-                            <div class="fake_pcg">
-                                <span v-for="h in this_hosts">{{h.name}} 
-                                <span class="clicky" v-on:click="remove(h.hostid)">x</span>  <br /></span>
-                            </div>
-                        </div>
-                        <div v-if="!creating" class="pure-control-group double">
-                            <label class="">Add a host</label>
-                            <div class="fake_pcg">
-                                <form autocomplete="off">
-                                <input type="text" id="addhost" name="addhost" class="form-control" 
-                                        v-on:keyup="hostlookup" v-model="host_search_str" />
-                                </form>
-                                <div>
-                                    <span v-for="ho in host_search">{{ho.name}}
-                                    <span class="clicky" v-on:click="add(ho.id)">+</span>  <br /></span>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                            
+<div v-if="editing" class="bg-white rounded-lg shadow p-4 mb-6">
+    <!-- Top action bar -->
+    <div class="flex justify-end mb-4">
+        <button
+            @click.prevent="editing = 0"
+            class="text-sm text-blue-600 hover:underline font-medium"
+        >
+            Done
+        </button>
+    </div>
 
-                        <htfield_fa table="conf_sessions" qid="desc" question="Description" myclass="pell" 
-                                  :answer="this_activity.desc" :targetid="this_activity.id"></htfield_fa>
-                                  
-                        <selectmenu_fa table="conf_sessions" qid="type" :answer="this_activity.type" menu="sessiontypes_menu" 
-                            :targetid="this_activity.id" question="Type"  labelfield="type"></selectmenu_fa>
-                        <selectmenu_fa v-if="this_activity.type=='101'" table="conf_sessions" 
-                                       qid="parent" :answer="this_activity.parent" menu="parents_menu" 
-                            :targetid="this_activity.id" question="What flex day?"  labelfield="title"></selectmenu_fa>
-                        <field myclass="double" table="conf_sessions" qid="recording" :answer="this_activity.recording" 
-                            :targetid="this_activity.id" question="Recording Link" placeholder=""></field>
-                        <br />
-                        
-                        <div v-if="creating" class="pure-control-group double">
-                            <label class=""></label>
-                            <div class="fake_pcg">
-                                <button class="pure-button pure-button-primary form-control" v-on:click="save_new_event">
-                                Create Activity
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div> 
-                <div v-else class="pure-g pure-form">
-                    <div class="pure-u-5-24">
-                        <a v-on:click.prevent="editing=1" href="#" class="button-inlist-action">Edit</a>
-                    </div>
-                    <div class="pure-u-19-24">
-                        <b>{{this_activity.title}}</b><br />
-                        {{ $root.$dj(this_activity.starttime).format('h:mma') }} / {{ this_activity.mode }}<br />
-                        Presented by: <span v-for="h in this_hosts">{{ h.name }}, </span><br />
-                        <br />
-                        <!--<div class="rhs_grey">{{this_activity.typeStr}}</div>-->
-                        <span v-html="this_activity.desc"></span>
-                    </div>
+    <!-- Form fields -->
+    <div class="space-y-4">
+        <field
+            myclass="double"
+            table="conf_sessions"
+            qid="title"
+            :answer="this_activity.title"
+            :targetid="this_activity.id"
+            question="Title"
+            placeholder="Title"
+        />
+
+        <dtpicker
+            table="conf_sessions"
+            qid="starttime"
+            :answer="this_activity.starttime"
+            :targetid="this_activity.id"
+            question="Starts at"
+        />
+
+        <field
+            myclass="double"
+            table="conf_sessions"
+            qid="length"
+            :answer="this_activity.length"
+            :targetid="this_activity.id"
+            question="Length (in hours)"
+            placeholder="1"
+        />
+
+        <selectmenu_fa
+            table="conf_sessions"
+            qid="mode"
+            :answer="this_activity.mode"
+            menu="modes_menu"
+            :targetid="this_activity.id"
+            question="What mode?"
+            labelfield="string"
+        />
+
+        <field
+            myclass="double"
+            table="conf_sessions"
+            qid="location"
+            :answer="this_activity.location"
+            :targetid="this_activity.id"
+            question="Location / Zoom"
+            placeholder="Location"
+        />
+
+        <field
+            myclass="double"
+            table="conf_sessions"
+            qid="location_irl"
+            :answer="this_activity.location_irl"
+            :targetid="this_activity.id"
+            question="Location / In Person"
+            placeholder="Location"
+        />
+
+        <!-- Host List -->
+        <div v-if="!creating">
+            <label class="block text-sm font-medium text-gray-700 mb-1">Hosts</label>
+            <div class="border rounded-md p-3 bg-gray-50 space-y-1">
+                <div
+                    v-for="h in this_hosts"
+                    :key="h.hostid"
+                    class="flex items-center justify-between text-sm"
+                >
+                    <span>{{ h.name }}</span>
+                    <button
+                        type="button"
+                        @click="remove(h.hostid)"
+                        class="text-red-500 hover:text-red-700 font-semibold"
+                        >
+                        ×
+                    </button>
                 </div>
-                
+                <div v-if="this_hosts.length === 0" class="text-sm text-gray-500 italic">
+                    Add a host by typing below
+                </div>
+            </div>
+        </div>
 
-            </div>` })
+        <!-- Host Add Input + Suggestions -->
+        <div v-if="!creating">
+            <label class="block text-sm font-medium text-gray-700 mb-1">Add a host</label>
+            <input
+                type="text"
+                id="addhost"
+                name="addhost"
+                v-model="host_search_str"
+                @keyup="hostlookup"
+                autocomplete="off"
+                class="w-full rounded-md border border-gray-500 bg-white text-gray-900 shadow focus:border-blue-600 focus:ring focus:ring-blue-300 focus:ring-opacity-50 px-4 py-2 text-base mb-2"
+            />
+            <div class="border rounded-md p-3 bg-gray-50 space-y-1">
+                <div
+                    v-for="ho in host_search"
+                    :key="ho.id"
+                    class="flex items-center justify-between text-sm"
+                >
+                    <span @click="add(ho.id)" class="cursor-pointer hover:underline">
+                        {{ ho.name }}
+                    </span>
+                    <button
+                        type="button"
+                        @click="add(ho.id)"
+                        class="text-blue-500 hover:text-blue-700 font-semibold"
+                        >
+                        +
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <htfield_fa
+            table="conf_sessions"
+            qid="desc"
+            question="Description"
+            myclass="pell"
+            :answer="this_activity.desc"
+            :targetid="this_activity.id"
+        />
+
+        <selectmenu_fa
+            table="conf_sessions"
+            qid="type"
+            :answer="this_activity.type"
+            menu="sessiontypes_menu"
+            :targetid="this_activity.id"
+            question="Type"
+            labelfield="type"
+        />
+
+        <selectmenu_fa
+            v-if="this_activity.type === '101'"
+            table="conf_sessions"
+            qid="parent"
+            :answer="this_activity.parent"
+            menu="parents_menu"
+            :targetid="this_activity.id"
+            question="What flex day?"
+            labelfield="title"
+        />
+
+        <field
+            myclass="double"
+            table="conf_sessions"
+            qid="recording"
+            :answer="this_activity.recording"
+            :targetid="this_activity.id"
+            question="Recording Link"
+            placeholder=""
+        />
+    </div>
+</div>
+<div v-else class="flex flex-col md:flex-row gap-4 bg-white rounded-md shadow p-4 mb-4">
+  <!-- Left: Edit Button -->
+  <div class="md:w-40 shrink-0">
+    <a href="#" @click.prevent="editing = 1" class="text-sm text-blue-600 hover:underline font-medium">
+      Edit
+    </a>
+  </div>
+
+  <!-- Right: Session Info -->
+  <div class="flex-grow text-sm text-gray-800">
+    <p class="text-base font-semibold text-gray-900 mb-1">{{ this_activity.title }}</p>
+
+    <p class="text-gray-600 mb-1">
+      {{ $root.$dj(this_activity.starttime).format('h:mma') }} /
+      <span class="capitalize">{{ this_activity.mode }}</span>
+    </p>
+
+    <p class="text-gray-600 mb-1">
+      Presented by:
+      <span v-for="(h, i) in this_hosts" :key="h.hostid">
+        {{ h.name }}<span v-if="i < this_hosts.length - 1">, </span>
+      </span>
+    </p>
+
+    <div class="mt-2 text-gray-700" v-html="this_activity.desc"></div>
+  </div>
+</div>
+
+</div>` })
 
 
 
diff --git a/style.css b/style.css
index fd15a07..89f1bec 100644
--- a/style.css
+++ b/style.css
@@ -10,7 +10,8 @@
 	height:300px;
 	outline:0;
 	overflow-y:auto;
-	padding:10px
+	padding:10px;
+	background-color: #fff;
 }
 .pell-actionbar{
 	background-color:#fff;