WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: use grain-form-field in grain-create-gallery

+20 -46
+20 -46
src/components/pages/grain-create-gallery.js
··· 4 4 import { draftGallery } from '../../services/draft-gallery.js'; 5 5 import '../atoms/grain-icon.js'; 6 6 import '../atoms/grain-button.js'; 7 + import '../atoms/grain-input.js'; 8 + import '../atoms/grain-textarea.js'; 9 + import '../molecules/grain-form-field.js'; 7 10 8 11 const UPLOAD_BLOB_MUTATION = ` 9 12 mutation UploadBlob($data: String!, $mimeType: String!) { ··· 117 120 .form { 118 121 padding: var(--space-sm); 119 122 } 120 - .form input, 121 - .form textarea { 122 - width: 100%; 123 - padding: var(--space-sm); 124 - border: 1px solid var(--color-border); 125 - border-radius: 6px; 126 - background: var(--color-bg-primary); 127 - color: var(--color-text-primary); 128 - font-size: var(--font-size-sm); 129 - font-family: inherit; 130 - margin-bottom: var(--space-sm); 131 - box-sizing: border-box; 132 - } 133 - .form textarea { 134 - min-height: 100px; 135 - resize: vertical; 136 - } 137 - .form input:focus, 138 - .form textarea:focus { 139 - outline: none; 140 - border-color: var(--color-accent, #0066cc); 141 - } 142 123 .error { 143 124 color: #ff4444; 144 125 padding: var(--space-sm); 145 126 text-align: center; 146 - } 147 - .char-count { 148 - font-size: var(--font-size-xs); 149 - color: var(--color-text-secondary); 150 - text-align: right; 151 - margin-top: -8px; 152 - margin-bottom: var(--space-sm); 153 127 } 154 128 `; 155 129 ··· 186 160 } 187 161 188 162 #handleTitleChange(e) { 189 - this._title = e.target.value.slice(0, 100); 163 + this._title = e.detail.value.slice(0, 100); 190 164 } 191 165 192 166 #handleDescriptionChange(e) { 193 - this._description = e.target.value.slice(0, 1000); 167 + this._description = e.detail.value.slice(0, 1000); 194 168 } 195 169 196 170 get #canPost() { ··· 306 280 ${this._error ? html`<p class="error">${this._error}</p>` : ''} 307 281 308 282 <div class="form"> 309 - <input 310 - type="text" 311 - placeholder="Add a title..." 312 - .value=${this._title} 313 - @input=${this.#handleTitleChange} 314 - maxlength="100" 315 - > 316 - <div class="char-count">${this._title.length}/100</div> 283 + <grain-form-field .value=${this._title} .maxlength=${100}> 284 + <grain-input 285 + placeholder="Add a title..." 286 + .value=${this._title} 287 + @input=${this.#handleTitleChange} 288 + ></grain-input> 289 + </grain-form-field> 317 290 318 - <textarea 319 - placeholder="Add a description (optional)..." 320 - .value=${this._description} 321 - @input=${this.#handleDescriptionChange} 322 - maxlength="1000" 323 - ></textarea> 324 - <div class="char-count">${this._description.length}/1000</div> 291 + <grain-form-field .value=${this._description} .maxlength=${1000}> 292 + <grain-textarea 293 + placeholder="Add a description (optional)..." 294 + .value=${this._description} 295 + .maxlength=${1000} 296 + @input=${this.#handleDescriptionChange} 297 + ></grain-textarea> 298 + </grain-form-field> 325 299 </div> 326 300 `; 327 301 }