a tool for shared writing and social publishing

make slider easier to click, adjusted pageWidth minmax full width button in themeSetters

+174 -159
+2 -2
components/ThemeManager/Pickers/ImagePicker.tsx
··· 73 73 }); 74 74 }} 75 75 > 76 - <div className="flex flex-col gap-2 w-full"> 76 + <div className="flex flex-col w-full"> 77 77 <div className="flex gap-2"> 78 78 <div 79 79 className={`shink-0 grow-0 w-fit z-10 cursor-pointer ${repeat ? "text-[#595959]" : " text-[#969696]"}`} ··· 122 122 }} 123 123 > 124 124 <Slider.Track 125 - className={`${repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`} 125 + className={`${repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px] my-2`} 126 126 ></Slider.Track> 127 127 <Slider.Thumb 128 128 className={`
+18 -11
components/ThemeManager/Pickers/PageWidthSetter.tsx
··· 13 13 closePicker: () => void; 14 14 }) => { 15 15 let { rep } = useReplicache(); 16 + 17 + let defaultPreset = 624; 18 + let widePreset = 768; 16 19 let pageWidth = useEntity(props.entityID, "theme/page-width")?.data.value; 17 - let currentValue = pageWidth || 624; 20 + let currentValue = pageWidth || defaultPreset; 18 21 let [interimValue, setInterimValue] = useState<number>(currentValue); 19 22 let [selectedPreset, setSelectedPreset] = useState< 20 23 "default" | "wide" | "custom" 21 24 >( 22 - currentValue === 624 ? "default" : currentValue === 756 ? "wide" : "custom", 25 + currentValue === defaultPreset 26 + ? "default" 27 + : currentValue === widePreset 28 + ? "wide" 29 + : "custom", 23 30 ); 24 - let min = 324; 31 + let min = 320; 25 32 let max = 1200; 26 33 27 34 let open = props.openPicker == props.thisPicker; ··· 47 54 <div className="flex flex-col gap-2"> 48 55 <div className="flex gap-2 items-center"> 49 56 <button 50 - className="font-bold text-[#000000] shrink-0 grow-0 w-fit" 57 + className="font-bold text-[#000000] shrink-0 grow-0 w-full flex gap-2 items-start text-left" 51 58 onClick={() => { 52 59 if (props.openPicker === props.thisPicker) { 53 60 props.setOpenPicker("null"); ··· 57 64 }} 58 65 > 59 66 Max Page Width 67 + <span className="flex font-normal text-[#969696]"> 68 + {currentValue}px 69 + </span> 60 70 </button> 61 - <div className="flex font-normal text-[#969696]"> 62 - {currentValue}px 63 - </div> 64 71 </div> 65 72 {open && ( 66 73 <div className="flex flex-col gap-1 px-3"> ··· 76 83 onChange={(e) => { 77 84 if (!e.currentTarget.checked) return; 78 85 setSelectedPreset("default"); 79 - setPageWidth(624); 86 + setPageWidth(defaultPreset); 80 87 }} 81 88 > 82 89 <div ··· 98 105 onChange={(e) => { 99 106 if (!e.currentTarget.checked) return; 100 107 setSelectedPreset("wide"); 101 - setPageWidth(756); 108 + setPageWidth(widePreset); 102 109 }} 103 110 > 104 111 <div ··· 126 133 } 127 134 }} 128 135 > 129 - <div className="flex flex-col gap-2 w-full"> 136 + <div className="flex flex-col w-full"> 130 137 <div className="flex gap-2"> 131 138 <div 132 139 className={`shrink-0 grow-0 w-fit z-10 cursor-pointer ${selectedPreset === "custom" ? "text-[#595959]" : "text-[#969696]"}`} ··· 188 195 }} 189 196 > 190 197 <Slider.Track 191 - className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`} 198 + className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px] my-2`} 192 199 /> 193 200 <Slider.Thumb 194 201 className={`flex w-4 h-4 rounded-full border-2 border-white cursor-pointer
+2 -2
components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
··· 245 245 props.setBgImage({ ...props.bgImage, repeat: 500 }); 246 246 }} 247 247 > 248 - <div className="flex flex-col gap-2 w-full"> 248 + <div className="flex flex-col w-full"> 249 249 <div className="flex gap-2"> 250 250 <div 251 251 className={`shink-0 grow-0 w-fit z-10 cursor-pointer ${props.bgImage?.repeat ? "text-[#595959]" : " text-[#969696]"}`} ··· 284 284 }} 285 285 > 286 286 <Slider.Track 287 - className={`${props.bgImage?.repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`} 287 + className={`${props.bgImage?.repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px] my-2`} 288 288 ></Slider.Track> 289 289 <Slider.Thumb 290 290 className={`
+151 -143
components/ThemeManager/PubPickers/PubPageWidthSetter.tsx
··· 11 11 openPicker: pickers; 12 12 setOpenPicker: (p: pickers) => void; 13 13 }) => { 14 - let currentValue = props.pageWidth || 624; 14 + let defaultPreset = 624; 15 + let widePreset = 768; 16 + 17 + let currentValue = props.pageWidth || defaultPreset; 15 18 let [interimValue, setInterimValue] = useState<number>(currentValue); 16 19 let [selectedPreset, setSelectedPreset] = useState< 17 20 "default" | "wide" | "custom" 18 21 >( 19 - currentValue === 624 ? "default" : currentValue === 756 ? "wide" : "custom", 22 + currentValue === defaultPreset 23 + ? "default" 24 + : currentValue === widePreset 25 + ? "wide" 26 + : "custom", 20 27 ); 21 - let min = 324; 28 + let min = 320; 22 29 let max = 1200; 23 30 24 31 // Update interim value when current value changes ··· 34 41 35 42 return ( 36 43 <div className="pageWidthSetter flex flex-col gap-2 px-2 py-[6px] border border-[#CCCCCC] rounded-md bg-white"> 37 - <div className="flex flex-col gap-2"> 38 - <div className="flex gap-2 items-center"> 39 - <button 40 - type="button" 41 - className="font-bold text-[#000000] shrink-0 grow-0 w-fit" 42 - onClick={() => props.setOpenPicker(props.thisPicker)} 43 - > 44 - Max Page Width 45 - </button> 46 - <div className="flex font-normal text-[#969696]"> 47 - {currentValue}px 48 - </div> 49 - </div> 50 - {open && ( 51 - <div className="flex flex-col gap-1 px-3"> 52 - <label htmlFor="pub-default" className="w-full"> 53 - <Radio 54 - radioCheckedClassName="text-[#595959]!" 55 - radioEmptyClassName="text-[#969696]!" 56 - type="radio" 57 - id="pub-default" 58 - name="pub-page-width-options" 59 - value="default" 60 - checked={selectedPreset === "default"} 61 - onChange={(e) => { 62 - if (!e.currentTarget.checked) return; 63 - setSelectedPreset("default"); 64 - setPageWidth(624); 65 - }} 44 + <button 45 + type="button" 46 + className="font-bold text-[#000000] shrink-0 grow-0 w-full flex gap-2 text-left items-center" 47 + onClick={() => { 48 + if (!open) { 49 + props.setOpenPicker(props.thisPicker); 50 + } else { 51 + props.setOpenPicker("null"); 52 + } 53 + }} 54 + > 55 + Max Page Width 56 + <div className="flex font-normal text-[#969696]">{currentValue}px</div> 57 + </button> 58 + 59 + {open && ( 60 + <div className="flex flex-col gap-1 px-3"> 61 + <label htmlFor="pub-default" className="w-full"> 62 + <Radio 63 + radioCheckedClassName="text-[#595959]!" 64 + radioEmptyClassName="text-[#969696]!" 65 + type="radio" 66 + id="pub-default" 67 + name="pub-page-width-options" 68 + value="default" 69 + checked={selectedPreset === "default"} 70 + onChange={(e) => { 71 + if (!e.currentTarget.checked) return; 72 + setSelectedPreset("default"); 73 + setPageWidth(defaultPreset); 74 + }} 75 + > 76 + <div 77 + className={`w-full cursor-pointer ${selectedPreset === "default" ? "text-[#595959]" : "text-[#969696]"}`} 66 78 > 67 - <div 68 - className={`w-full cursor-pointer ${selectedPreset === "default" ? "text-[#595959]" : "text-[#969696]"}`} 69 - > 70 - default (624px) 71 - </div> 72 - </Radio> 73 - </label> 74 - <label htmlFor="pub-wide" className="w-full"> 75 - <Radio 76 - radioCheckedClassName="text-[#595959]!" 77 - radioEmptyClassName="text-[#969696]!" 78 - type="radio" 79 - id="pub-wide" 80 - name="pub-page-width-options" 81 - value="wide" 82 - checked={selectedPreset === "wide"} 83 - onChange={(e) => { 84 - if (!e.currentTarget.checked) return; 85 - setSelectedPreset("wide"); 86 - setPageWidth(756); 87 - }} 79 + default (624px) 80 + </div> 81 + </Radio> 82 + </label> 83 + <label htmlFor="pub-wide" className="w-full"> 84 + <Radio 85 + radioCheckedClassName="text-[#595959]!" 86 + radioEmptyClassName="text-[#969696]!" 87 + type="radio" 88 + id="pub-wide" 89 + name="pub-page-width-options" 90 + value="wide" 91 + checked={selectedPreset === "wide"} 92 + onChange={(e) => { 93 + if (!e.currentTarget.checked) return; 94 + setSelectedPreset("wide"); 95 + setPageWidth(widePreset); 96 + }} 97 + > 98 + <div 99 + className={`w-full cursor-pointer ${selectedPreset === "wide" ? "text-[#595959]" : "text-[#969696]"}`} 88 100 > 89 - <div 90 - className={`w-full cursor-pointer ${selectedPreset === "wide" ? "text-[#595959]" : "text-[#969696]"}`} 91 - > 92 - wide (756px) 93 - </div> 94 - </Radio> 95 - </label> 96 - <label htmlFor="pub-custom" className="pb-3 w-full"> 97 - <Radio 98 - type="radio" 99 - id="pub-custom" 100 - name="pub-page-width-options" 101 - value="custom" 102 - radioCheckedClassName="text-[#595959]!" 103 - radioEmptyClassName="text-[#969696]!" 104 - checked={selectedPreset === "custom"} 105 - onChange={(e) => { 106 - if (!e.currentTarget.checked) return; 107 - setSelectedPreset("custom"); 108 - if (selectedPreset !== "custom") { 109 - setPageWidth(currentValue); 110 - setInterimValue(currentValue); 111 - } 112 - }} 113 - > 114 - <div className="flex flex-col gap-2 w-full"> 115 - <div className="flex gap-2"> 116 - <div 117 - className={`shrink-0 grow-0 w-fit z-10 cursor-pointer ${selectedPreset === "custom" ? "text-[#595959]" : "text-[#969696]"}`} 118 - > 119 - custom 120 - </div> 121 - <div 122 - className={`flex font-normal ${selectedPreset === "custom" ? "text-[#969696]" : "text-[#C3C3C3]"}`} 123 - > 124 - <Input 125 - type="number" 126 - className="w-10 text-right appearance-none bg-transparent" 127 - max={max} 128 - min={min} 129 - value={interimValue} 130 - onChange={(e) => { 131 - setInterimValue(parseInt(e.currentTarget.value)); 132 - }} 133 - onKeyDown={(e) => { 134 - if (e.key === "Enter" || e.key === "Escape") { 135 - e.preventDefault(); 136 - let clampedValue = interimValue; 137 - if (!isNaN(interimValue)) { 138 - clampedValue = Math.max( 139 - min, 140 - Math.min(max, interimValue), 141 - ); 142 - setInterimValue(clampedValue); 143 - } 144 - setPageWidth(clampedValue); 145 - } 146 - }} 147 - onBlur={() => { 101 + wide (756px) 102 + </div> 103 + </Radio> 104 + </label> 105 + <label htmlFor="pub-custom" className="pb-3 w-full"> 106 + <Radio 107 + type="radio" 108 + id="pub-custom" 109 + name="pub-page-width-options" 110 + value="custom" 111 + radioCheckedClassName="text-[#595959]!" 112 + radioEmptyClassName="text-[#969696]!" 113 + checked={selectedPreset === "custom"} 114 + onChange={(e) => { 115 + if (!e.currentTarget.checked) return; 116 + setSelectedPreset("custom"); 117 + if (selectedPreset !== "custom") { 118 + setPageWidth(currentValue); 119 + setInterimValue(currentValue); 120 + } 121 + }} 122 + > 123 + <div className="flex flex-col w-full"> 124 + <div className="flex gap-2"> 125 + <div 126 + className={`shrink-0 grow-0 w-fit z-10 cursor-pointer ${selectedPreset === "custom" ? "text-[#595959]" : "text-[#969696]"}`} 127 + > 128 + custom 129 + </div> 130 + <div 131 + className={`flex font-normal ${selectedPreset === "custom" ? "text-[#969696]" : "text-[#C3C3C3]"}`} 132 + > 133 + <Input 134 + type="number" 135 + className="w-10 text-right appearance-none bg-transparent" 136 + max={max} 137 + min={min} 138 + value={interimValue} 139 + onChange={(e) => { 140 + setInterimValue(parseInt(e.currentTarget.value)); 141 + }} 142 + onKeyDown={(e) => { 143 + if (e.key === "Enter" || e.key === "Escape") { 144 + e.preventDefault(); 148 145 let clampedValue = interimValue; 149 146 if (!isNaN(interimValue)) { 150 147 clampedValue = Math.max( ··· 154 151 setInterimValue(clampedValue); 155 152 } 156 153 setPageWidth(clampedValue); 157 - }} 158 - /> 159 - px 160 - </div> 154 + } 155 + }} 156 + onBlur={() => { 157 + let clampedValue = interimValue; 158 + if (!isNaN(interimValue)) { 159 + clampedValue = Math.max( 160 + min, 161 + Math.min(max, interimValue), 162 + ); 163 + setInterimValue(clampedValue); 164 + } 165 + setPageWidth(clampedValue); 166 + }} 167 + /> 168 + px 161 169 </div> 162 - <Slider.Root 163 - className={`relative grow flex items-center select-none touch-none w-full h-fit px-1`} 164 - value={[interimValue]} 165 - max={max} 166 - min={min} 167 - step={16} 168 - onValueChange={(value) => { 169 - setInterimValue(value[0]); 170 - }} 171 - onValueCommit={(value) => { 172 - setPageWidth(value[0]); 173 - }} 174 - > 175 - <Slider.Track 176 - className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`} 177 - /> 178 - <Slider.Thumb 179 - className={`flex w-4 h-4 rounded-full border-2 border-white cursor-pointer 170 + </div> 171 + <Slider.Root 172 + className={`relative grow flex items-center select-none touch-none w-full h-fit px-1`} 173 + value={[interimValue]} 174 + max={max} 175 + min={min} 176 + step={16} 177 + onValueChange={(value) => { 178 + setInterimValue(value[0]); 179 + }} 180 + onValueCommit={(value) => { 181 + setPageWidth(value[0]); 182 + }} 183 + > 184 + <Slider.Track 185 + className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px] my-2`} 186 + /> 187 + <Slider.Thumb 188 + className={`flex w-4 h-4 rounded-full border-2 border-white cursor-pointer 180 189 ${selectedPreset === "custom" ? "bg-[#595959] shadow-[0_0_0_1px_#8C8C8C,inset_0_0_0_1px_#8C8C8C]" : "bg-[#C3C3C3]"} 181 190 `} 182 - aria-label="Max Page Width" 183 - /> 184 - </Slider.Root> 185 - </div> 186 - </Radio> 187 - </label> 188 - </div> 189 - )} 190 - </div> 191 + aria-label="Max Page Width" 192 + /> 193 + </Slider.Root> 194 + </div> 195 + </Radio> 196 + </label> 197 + </div> 198 + )} 191 199 </div> 192 200 ); 193 201 };
+1 -1
lexicons/api/lexicons.ts
··· 1824 1824 }, 1825 1825 pageWidth: { 1826 1826 type: "integer", 1827 - minimum: 324, 1827 + minimum: 320, 1828 1828 maximum: 1200, 1829 1829 }, 1830 1830 primary: {