Feed page fixes

This commit is contained in:
Alexey Khaov 2023-01-26 01:13:01 +03:00
parent 50325cf271
commit f22d6c60c5
20 changed files with 351 additions and 156 deletions

View File

@ -1,3 +1,4 @@
<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H14V18.6667L7 14.9333L0 18.6667V0ZM2 2V15.3333L7 12.6667L12 15.3333V2H2Z" fill="#141414"/>
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.53002 16C1.95461 16 2.22981 15.7959 2.89814 15.1909L5.93317 12.4064C5.96462 12.3699 6.03538 12.3699 6.06683 12.4064L9.10972 15.1909C9.77806 15.7959 10.0454 16 10.4778 16C11.1069 16 11.5 15.5991 11.5 14.9431V2.21595C11.5 0.765376 10.6823 0 9.13331 0H2.86669C1.31773 0 0.5 0.765376 0.5 2.21595V14.9431C0.5 15.5991 0.893138 16 1.53002 16ZM2.27698 13.6018C2.17477 13.6966 2.04896 13.6674 2.04896 13.5289V2.31071C2.04896 1.72756 2.36347 1.44328 2.99249 1.44328H9.00751C9.63653 1.44328 9.95104 1.72756 9.95104 2.31071V13.5289C9.95104 13.6674 9.83309 13.6966 9.72302 13.6018L6.52287 10.7298C6.19264 10.4237 5.81523 10.4237 5.47713 10.7298L2.27698 13.6018Z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 207 B

After

Width:  |  Height:  |  Size: 781 B

View File

@ -1,3 +1,4 @@
<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H14V18.6667L7 14.9333L0 18.6667V0ZM2 2V15.3333L7 12.6667L12 15.3333V2H2Z" fill="#141414"/>
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.53002 16C1.95461 16 2.22981 15.7959 2.89814 15.1909L5.93317 12.4064C5.96462 12.3699 6.03538 12.3699 6.06683 12.4064L9.10972 15.1909C9.77806 15.7959 10.0454 16 10.4778 16C11.1069 16 11.5 15.5991 11.5 14.9431V2.21595C11.5 0.765376 10.6823 0 9.13331 0H2.86669C1.31773 0 0.5 0.765376 0.5 2.21595V14.9431C0.5 15.5991 0.893138 16 1.53002 16ZM2.27698 13.6018C2.17477 13.6966 2.04896 13.6674 2.04896 13.5289V2.31071C2.04896 1.72756 2.36347 1.44328 2.99249 1.44328H9.00751C9.63653 1.44328 9.95104 1.72756 9.95104 2.31071V13.5289C9.95104 13.6674 9.83309 13.6966 9.72302 13.6018L6.52287 10.7298C6.19264 10.4237 5.81523 10.4237 5.47713 10.7298L2.27698 13.6018Z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 247 B

After

Width:  |  Height:  |  Size: 781 B

View File

@ -1,3 +1,4 @@
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 0C4.04148 0 0 4.04148 0 9C0 13.9585 4.04148 18 9 18V21.0918L10.5391 20.1055C12.7749 18.6714 16.8521 15.5753 17.7988 10.8828C17.9284 10.2776 18 9.64776 18 9C18 4.04148 13.9585 0 9 0ZM9 2C12.8775 2 16 5.12252 16 9C16 9.50418 15.9446 9.99539 15.8418 10.4727L15.8398 10.4805L15.8379 10.4863C15.2437 13.4344 12.9716 15.6052 11 17.1387V15.7988L9.875 15.9395C9.57406 15.9771 9.28394 16 9 16C5.12252 16 2 12.8775 2 9C2 5.12252 5.12252 2 9 2Z" fill="black"/>
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.79242 16C5.22464 16 5.54313 15.7877 6.06635 15.3251L8.6673 13.0351H13.2322C15.5147 13.0351 16.7962 11.7156 16.7962 9.46351V3.57156C16.7962 1.31943 15.5147 0 13.2322 0H3.56398C1.2891 0 0 1.31943 0 3.57156V9.46351C0 11.7232 1.32701 13.0351 3.5109 13.0351H3.8218V14.8929C3.8218 15.5678 4.1782 16 4.79242 16ZM5.17156 14.3014V12.1403C5.17156 11.6929 4.97441 11.5185 4.54976 11.5185H3.61706C2.19147 11.5185 1.509 10.7981 1.509 9.41801V3.61706C1.509 2.23697 2.19147 1.51659 3.61706 1.51659H13.1867C14.6047 1.51659 15.2872 2.23697 15.2872 3.61706V9.41801C15.2872 10.7981 14.6047 11.5185 13.1867 11.5185H8.58389C8.12133 11.5185 7.89384 11.5943 7.57536 11.928L5.17156 14.3014Z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 565 B

After

Width:  |  Height:  |  Size: 799 B

View File

@ -0,0 +1,3 @@
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.604 6.79695C15.2752 6.79695 16.6287 5.32603 16.6287 3.51674C16.6287 1.73507 15.2821 0.3125 13.604 0.3125C11.9466 0.3125 10.5793 1.75579 10.5793 3.53055C10.5862 5.33294 11.9397 6.79695 13.604 6.79695ZM5.60031 6.95578C7.05741 6.95578 8.23137 5.66441 8.23137 4.0692C8.23137 2.51542 7.05741 1.25858 5.60031 1.25858C4.15702 1.25858 2.96233 2.53613 2.96924 4.0761C2.96924 5.67132 4.15011 6.95578 5.60031 6.95578ZM13.604 5.58845C12.651 5.58845 11.8431 4.69071 11.8431 3.52365C11.8431 2.39802 12.6441 1.521 13.604 1.521C14.5708 1.521 15.365 2.38421 15.365 3.51674C15.365 4.6769 14.5639 5.58845 13.604 5.58845ZM5.60031 5.76109C4.81996 5.76109 4.15702 5.01528 4.15702 4.0761C4.15702 3.17836 4.81306 2.44636 5.60031 2.44636C6.40137 2.44636 7.0505 3.16455 7.0505 4.0692C7.0505 5.01528 6.38756 5.76109 5.60031 5.76109ZM1.80218 13.3021H7.1679C6.78809 13.0811 6.53257 12.577 6.58091 12.1212H1.74002C1.60882 12.1212 1.55357 12.0591 1.55357 11.9417C1.55357 10.3603 3.4043 8.85484 5.5934 8.85484C6.36684 8.85484 7.14028 9.0482 7.73417 9.37967C7.96896 9.0413 8.259 8.75126 8.63881 8.50265C7.76179 7.96401 6.67069 7.67397 5.5934 7.67397C2.67229 7.67397 0.310547 9.75949 0.310547 12.0522C0.310547 12.8809 0.807757 13.3021 1.80218 13.3021ZM9.30176 13.3021H17.9062C19.1009 13.3021 19.681 12.9223 19.681 12.1074C19.681 10.2084 17.3055 7.68087 13.604 7.68087C9.90255 7.68087 7.52699 10.2084 7.52699 12.1074C7.52699 12.9223 8.10707 13.3021 9.30176 13.3021ZM9.08078 12.0936C8.92194 12.0936 8.85979 12.0384 8.85979 11.9141C8.85979 10.8575 10.5655 8.88937 13.604 8.88937C16.6425 8.88937 18.3482 10.8575 18.3482 11.9141C18.3482 12.0384 18.2861 12.0936 18.1203 12.0936H9.08078Z" fill="#141414"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,11 @@
<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.9044 15.1065C16.5423 15.1065 16.1804 14.9952 15.8461 14.8001L12.0312 12.294C11.7526 12.099 11.6691 11.7091 11.8641 11.4308C12.0591 11.1523 12.449 11.0687 12.7273 11.2638L16.5145 13.7699C16.7651 13.9369 17.1271 13.9092 17.3777 13.6864C17.6283 13.4636 18.0181 13.4636 18.2689 13.7421C18.4917 13.9927 18.4917 14.3825 18.2132 14.6333C17.8513 14.9394 17.3777 15.1065 16.9044 15.1065L16.9044 15.1065Z" fill="#141414"/>
<path d="M14.4259 17.0004C14.0639 17.0004 13.702 16.9168 13.3957 16.694L11.1401 15.2182C10.8616 15.0231 10.778 14.6333 10.9451 14.3549C11.1401 14.0764 11.53 13.9929 11.8083 14.1599L14.0638 15.6358C14.3979 15.8308 14.8435 15.7471 15.0386 15.413C15.2336 15.1067 15.6235 15.0232 15.9018 15.218C16.2081 15.413 16.2916 15.8029 16.0968 16.0812C15.7347 16.6661 15.0943 17.0003 14.4259 17.0003L14.4259 17.0004Z" fill="#141414"/>
<path d="M19.3842 13.1568C18.8274 13.1568 18.1869 12.9617 17.4628 12.5163L13.8984 10.1493C13.6198 9.95423 13.5363 9.56437 13.7313 9.28605C13.9263 9.0075 14.3162 8.92398 14.5945 9.119L18.1311 11.4861C18.6603 11.7924 19.607 12.2658 20.1083 11.5696C20.4147 11.124 20.3589 10.5114 20.1641 10.3443C19.8855 10.1215 19.83 9.73167 20.0528 9.4531C20.2756 9.17455 20.6654 9.119 20.944 9.3418C21.7237 9.95443 21.8352 11.319 21.1668 12.2658C20.7766 12.7669 20.1919 13.1568 19.3842 13.1568H19.3842Z" fill="#141414"/>
<path d="M19.7461 10.456C19.6348 10.456 19.5233 10.4282 19.412 10.3447L14.9564 7.5322C14.7893 7.4209 13.4805 6.641 12.8956 5.3044C12.1717 5.5272 11.4475 5.75 10.6401 6.05632L10.5566 6.08409C9.69335 6.39042 8.05044 7.00304 7.10349 5.91704C6.60235 5.33216 6.40732 4.77527 6.51861 4.19058C6.74141 3.13235 7.91095 2.54767 8.8577 2.07427C9.05272 1.99074 9.21977 1.90722 9.35884 1.82369L9.55386 1.71239C10.25 1.32254 10.974 0.904927 11.6424 0.459326C13.146 -0.543163 14.8169 0.403578 14.9005 0.43155C14.9005 0.43155 14.9282 0.431549 14.9282 0.459326C14.9282 0.459326 16.3484 1.37827 17.6017 1.96296C18.4371 2.35281 19.3561 2.10223 20.3585 1.82369C20.5813 1.76794 20.7762 1.71238 20.999 1.65663C21.3331 1.57311 21.6674 1.76794 21.7509 2.13001C21.8344 2.46411 21.6396 2.79838 21.2775 2.88192C21.0825 2.93767 20.8877 2.99323 20.6649 3.04897C19.5511 3.3553 18.2978 3.6894 17.0447 3.10472C15.7917 2.51984 14.4271 1.65663 14.2322 1.51735C14.1209 1.4616 13.1185 0.960461 12.3108 1.48957C11.6146 1.96295 10.8627 2.38077 10.1387 2.77063L9.97165 2.88193C9.8046 2.96546 9.60958 3.07696 9.41476 3.16048C8.77434 3.46681 7.82739 3.9402 7.74385 4.41354C7.6881 4.63634 7.88312 4.88692 8.05018 5.08192C8.41225 5.49954 9.52606 5.1097 10.1109 4.8869L10.1944 4.85912C11.2527 4.46927 12.1994 4.16295 13.1184 3.91237C13.2854 3.85663 13.4525 3.8846 13.6195 3.96812C13.7588 4.05165 13.8701 4.19092 13.8981 4.35797C14.1766 5.61103 15.569 6.39074 15.569 6.41869C15.569 6.41869 15.5968 6.41869 15.5968 6.44647L19.8296 9.11987L21.9738 8.53499C22.3079 8.45146 22.6422 8.64629 22.7535 8.98058C22.8371 9.31468 22.6422 9.64896 22.3079 9.76029L19.9131 10.4287C19.8574 10.4559 19.8018 10.4559 19.7461 10.4559L19.7461 10.456Z" fill="#141414"/>
<path d="M7.24326 15.7193C6.4358 15.7193 5.23828 15.1624 5.23828 13.6308V12.3498C5.23828 12.2662 5.23828 11.4586 5.82317 10.8739C6.07374 10.6233 6.51934 10.3447 7.21551 10.3447C7.74465 10.3447 8.218 10.5118 8.55211 10.8739C9.137 11.4588 9.137 12.2662 9.137 12.3775V13.6586C9.137 14.466 8.83067 14.9396 8.55211 15.1902C8.07874 15.6915 7.41054 15.7193 7.24331 15.7193H7.24326ZM7.24326 11.598C6.90916 11.598 6.76989 11.7373 6.74211 11.7651C6.51931 11.9879 6.51931 12.35 6.51931 12.35V13.631C6.51931 14.3272 6.99269 14.4385 7.27123 14.4665C7.57756 14.4665 7.93961 14.3272 7.93961 13.631V12.35C7.91163 12.0714 7.82811 11.5981 7.24323 11.5981L7.24326 11.598Z" fill="#141414"/>
<path d="M4.59677 14.02C4.569 14.02 4.569 14.02 4.59677 14.02C3.78931 14.02 2.5918 13.4632 2.5918 11.9315V11.4582C2.5918 11.3746 2.5918 10.567 3.17668 9.98227C3.42726 9.73169 3.87285 9.45312 4.56903 9.45312C5.09817 9.45312 5.57152 9.62018 5.90563 9.98227C6.49051 10.5672 6.49051 11.3746 6.49051 11.4859V11.9593C6.49051 12.7667 6.18419 13.2403 5.90563 13.4909C5.40448 13.9922 4.73606 14.02 4.59682 14.02H4.59677ZM4.569 10.7062C4.23489 10.7062 4.09563 10.8455 4.06785 10.8733C3.84505 11.0961 3.84505 11.4581 3.84505 11.4581V11.9315C3.84505 12.6834 4.40194 12.767 4.56902 12.767C4.87535 12.767 5.2374 12.6277 5.2374 11.9315V11.4581C5.26518 11.1798 5.15368 10.7062 4.56902 10.7062L4.569 10.7062Z" fill="#141414"/>
<path d="M9.91513 16.554C9.91513 16.554 9.88736 16.554 9.91513 16.554C9.10767 16.554 7.91016 15.9971 7.91016 14.4654V13.5187C7.91016 13.4352 7.91016 12.6275 8.49504 12.0428C8.74562 11.7922 9.19121 11.5137 9.88739 11.5137C10.4165 11.5137 10.8899 11.6807 11.224 12.0428C11.8089 12.6277 11.8089 13.4352 11.8089 13.5464V14.5212C11.8089 15.3286 11.5025 15.8022 11.224 16.0528C10.7506 16.5262 10.0822 16.554 9.91518 16.554H9.91513ZM9.91513 12.739C9.58103 12.739 9.44176 12.8783 9.41399 12.906C9.19119 13.1288 9.19119 13.4909 9.19119 13.4909V14.4657C9.19119 15.1618 9.66456 15.2731 9.94311 15.3011C10.2494 15.3011 10.6115 15.1618 10.6115 14.4657L10.6113 13.5187C10.5835 13.2402 10.4998 12.739 9.91511 12.739L9.91513 12.739Z" fill="#141414"/>
<path d="M5.57038 3.55025C5.51463 3.55025 5.43111 3.55025 5.37536 3.52247C5.37536 3.52247 4.0943 3.10484 3.42613 2.88204C3.09202 2.77074 2.92498 2.40867 3.03628 2.10233C3.14758 1.76822 3.50965 1.60118 3.81599 1.71248C4.31714 1.87953 5.20834 2.18585 5.59819 2.29736L9.97026 1.35062C10.3044 1.26709 10.6386 1.48989 10.7222 1.82399C10.8057 2.15809 10.5829 2.49237 10.2488 2.57591L5.70971 3.55065C5.68173 3.55026 5.62599 3.55026 5.57043 3.55026L5.57038 3.55025Z" fill="#141414"/>
<path d="M3.20449 11.0961C3.09319 11.0961 2.98169 11.0683 2.87039 10.9848L0.280727 9.31385C0.00217883 9.11883 -0.0813423 8.72897 0.0857044 8.45065C0.252756 8.1721 0.670589 8.08858 0.948909 8.25563L3.53857 9.92654C3.81712 10.1216 3.90064 10.5114 3.73359 10.7897C3.62229 10.9848 3.42727 11.0961 3.20445 11.0961H3.20449Z" fill="#141414"/>
</svg>

After

Width:  |  Height:  |  Size: 5.9 KiB

View File

@ -0,0 +1,3 @@
<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5851 15.408C5.97872 15.408 6.32401 15.2423 6.8005 14.8279L9.01723 12.8529C9.52825 13.3846 10.2948 13.6678 11.2547 13.6678H13.6164L15.916 15.6428C16.3718 16.0295 16.6964 16.2436 17.0693 16.2436C17.6217 16.2436 17.9463 15.85 17.9463 15.2492V13.6678H18.264C20.0042 13.6678 21.1643 12.6043 21.1643 10.8157V6.59633C21.1643 4.78013 19.9835 3.68903 18.2087 3.68903H17.0071V3.24016C17.0071 1.36182 15.8539 0.25 13.9617 0.25H3.87939C2.04248 0.25 0.833984 1.36182 0.833984 3.24016V9.70389C0.833984 11.5546 2.02176 12.6526 3.82415 12.6526H4.69427V14.4205C4.69427 15.0282 5.02574 15.408 5.5851 15.408ZM5.93039 11.9759C5.93039 11.5615 5.67487 11.3474 5.32959 11.3474H4.04513C2.89879 11.3474 2.20822 10.7052 2.20822 9.51053V3.39209C2.20822 2.19741 2.90569 1.54827 4.04513 1.54827H13.7891C14.9354 1.54827 15.626 2.19741 15.626 3.39209V3.68903H11.2547C9.41776 3.68903 8.29904 4.78013 8.29904 6.59633V10.8157C8.29904 11.1057 8.32666 11.3682 8.38191 11.6168L5.93039 13.9095V11.9759ZM16.7171 14.745L14.5556 12.7838C14.2517 12.5076 13.9962 12.3833 13.5888 12.3833H11.3997C10.3155 12.3833 9.65946 11.7825 9.65946 10.6362V6.72754C9.65946 5.59501 10.3155 4.9804 11.3997 4.9804H18.0568C19.1479 4.9804 19.8039 5.59501 19.8039 6.72754V10.6362C19.8039 11.7756 19.141 12.3833 18.0568 12.3833H17.311C16.9726 12.3833 16.7171 12.5905 16.7171 13.0048V14.745Z" fill="#141414"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,3 @@
<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.804688 16.2406C0.804688 17.7391 1.57812 18.5126 3.05594 18.5126H9.51967C10.9975 18.5126 11.7709 17.7322 11.7709 16.2406V14.963H12.9449C14.4227 14.963 15.1961 14.1827 15.1961 12.6911V7.22865C15.1961 6.3171 15.0028 5.73703 14.4572 5.17766L11.0182 1.66957C10.4934 1.13783 9.87186 0.930664 9.07771 0.930664H6.48117C5.00335 0.930664 4.22991 1.71101 4.22991 3.20954V4.48019H3.05594C1.57812 4.48019 0.804688 5.26744 0.804688 6.75907V16.2406ZM11.0735 8.97579L7.33057 5.17766C6.80573 4.64593 6.35686 4.50091 5.60414 4.4871V3.29241C5.60414 2.66399 5.93562 2.3118 6.59856 2.3118H9.47824V5.59201C9.47824 6.44831 9.93401 6.89718 10.7834 6.89718H13.815V12.6013C13.815 13.2366 13.4835 13.5888 12.8206 13.5888H11.7709V10.937C11.7709 10.0047 11.6535 9.56968 11.0735 8.97579ZM10.6177 5.41936V2.87116L13.4559 5.75774H10.9561C10.7144 5.75774 10.6177 5.66106 10.6177 5.41936ZM2.17892 16.1508V6.84884C2.17892 6.21352 2.51039 5.86133 3.18025 5.86133H5.28648V9.61802C5.28648 10.6193 5.77679 11.1027 6.77121 11.1027H10.3967V16.1508C10.3967 16.7861 10.0652 17.1383 9.39537 17.1383H3.17334C2.51039 17.1383 2.17892 16.7861 2.17892 16.1508ZM6.90241 9.89425C6.61928 9.89425 6.49498 9.77686 6.49498 9.48682V6.12374L10.2102 9.89425H6.90241Z" fill="#141414"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

3
public/icons/feed-my.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.4624 1.71275H12.5365C12.4881 1.09124 12.1221 0.759766 11.4523 0.759766H4.5466C3.87674 0.759766 3.51074 1.09124 3.4624 1.71275ZM2.10889 3.72231H13.8969C13.8002 3.06627 13.4618 2.68645 12.7229 2.68645H3.27595C2.53704 2.68645 2.20557 3.06627 2.10889 3.72231ZM2.78564 16.7257H13.1994C14.6911 16.7257 15.4783 15.9523 15.4783 14.4745V7.113C15.4783 5.63518 14.6911 4.86175 13.1994 4.86175H2.78564C1.28711 4.86175 0.513672 5.62828 0.513672 7.113V14.4745C0.513672 15.9523 1.28711 16.7257 2.78564 16.7257ZM2.87542 15.3446C2.24009 15.3446 1.8879 15.02 1.8879 14.3502V7.23731C1.8879 6.56745 2.24009 6.23598 2.87542 6.23598H13.1097C13.745 6.23598 14.0972 6.56745 14.0972 7.23731V14.3502C14.0972 15.02 13.745 15.3446 13.1097 15.3446H2.87542Z" fill="#141414"/>
</svg>

After

Width:  |  Height:  |  Size: 861 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.71205 15.4353C5.10568 15.4353 5.39572 15.2419 5.87221 14.8207L8.24086 12.7351H12.3981C14.4767 12.7351 15.6438 11.5336 15.6438 9.48256V4.11684C15.6438 2.06585 14.4767 0.864258 12.3981 0.864258H3.59333C1.52162 0.864258 0.347656 2.06585 0.347656 4.11684V9.48256C0.347656 11.5405 1.55615 12.7351 3.54499 12.7351H3.82813V14.427C3.82813 15.0416 4.15269 15.4353 4.71205 15.4353ZM5.05734 13.8884V11.9203C5.05734 11.5128 4.87779 11.354 4.49107 11.354H3.64167C2.3434 11.354 1.72189 10.698 1.72189 9.44113V4.15827C1.72189 2.90144 2.3434 2.2454 3.64167 2.2454H12.3567C13.648 2.2454 14.2695 2.90144 14.2695 4.15827V9.44113C14.2695 10.698 13.648 11.354 12.3567 11.354H8.1649C7.74365 11.354 7.53648 11.4231 7.24644 11.7269L5.05734 13.8884ZM4.67062 7.8321C5.23689 7.8321 5.69266 7.36942 5.69266 6.79625C5.69266 6.22998 5.23689 5.7673 4.67062 5.7673C4.09745 5.7673 3.63477 6.22998 3.63477 6.79625C3.63477 7.36942 4.09745 7.8321 4.67062 7.8321ZM7.99916 7.8321C8.56543 7.8321 9.02811 7.36942 9.02811 6.79625C9.02811 6.22998 8.56543 5.7673 7.99916 5.7673C7.4329 5.7673 6.97022 6.22998 6.97022 6.79625C6.97022 7.36942 7.4329 7.8321 7.99916 7.8321ZM11.3346 7.8321C11.9009 7.8321 12.3636 7.36942 12.3636 6.79625C12.3636 6.22998 11.9009 5.7673 11.3346 5.7673C10.7683 5.7673 10.3057 6.22998 10.3057 6.79625C10.3057 7.36942 10.7683 7.8321 11.3346 7.8321Z" fill="#141414"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1,3 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.9975 4.89363L13.1038 0L0 13.1064V18H4.89363L17.9975 4.89363ZM13.105 2.55674L15.4421 4.89383L14.4612 5.87591L12.1241 3.53882L13.105 2.55674ZM12.1241 3.53882L14.4612 5.87591L4.14434 16.1915L1.80725 13.8544L12.1241 3.53882ZM1.80725 16.1915V13.8544L4.14434 16.1915H1.80725Z" fill="#141414"/>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.0195 0.900477C13.8189 -0.300159 11.7378 -0.300159 10.4571 0.900477L2.13272 9.22488C2.05265 9.30495 1.97259 9.46496 1.97259 9.54502L0.0516005 14.9079C-0.188481 15.5481 0.451812 16.1886 1.09209 15.9484L6.37489 13.9473C6.45496 13.9473 6.61497 13.7872 6.69503 13.7872L15.0194 5.38272C16.3001 4.10213 16.3001 2.10098 15.0194 0.900345L15.0195 0.900477ZM2.13272 13.7873L3.01321 11.2259C3.97378 12.1865 3.6535 11.8662 4.61406 12.8267L2.13272 13.7873ZM13.8989 4.26226L6.0548 12.1064L3.81367 9.86528L11.6578 2.02113C12.2981 1.38085 13.3387 1.38085 13.8989 2.02113C14.5393 2.58137 14.5393 3.62197 13.8989 4.26226Z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 404 B

After

Width:  |  Height:  |  Size: 736 B

7
public/icons/pin.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14.5" r="13.25" stroke="#141414" stroke-width="1.5"/>
<path d="M15.3033 9.43567L16.2427 8.5L20 12.2427L19.0607 13.1783L18.1213 12.2427L15.5147 16.7573L16.454 17.693L15.5147 18.6287L9.87867 13.0147L10.818 12.079L11.7573 13.0147L16.2427 10.3713L15.3033 9.43567Z" fill="white"/>
<path d="M12.6967 16.7573L11.7573 15.8217L8 20.5L12.6967 16.7573Z" fill="white"/>
<path d="M15.3033 9.43567L16.2427 8.5L20 12.2427L19.0607 13.1783L18.1213 12.2427L15.5147 16.7573L16.454 17.693L15.5147 18.6287L9.87867 13.0147L10.818 12.079L11.7573 13.0147L16.2427 10.3713L15.3033 9.43567Z" stroke="#141414"/>
<path d="M12.6967 16.7573L11.7573 15.8217L8 20.5L12.6967 16.7573Z" stroke="#141414"/>
</svg>

After

Width:  |  Height:  |  Size: 793 B

View File

@ -25,6 +25,10 @@
height: 1.2em;
width: 100%;
}
.feedControlIcon {
max-width: 1.4em;
}
}
.shoutCardWithBorder {
@ -399,8 +403,7 @@
}
.shoutCardFeed {
border-bottom: 1px solid #e8e8e8;
margin-bottom: 2em;
margin-bottom: 4em;
.shoutCardContent {
margin-bottom: 0;
@ -408,11 +411,12 @@
}
.shoutCardDetails {
border-top: 3px solid #141414;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@include font-size(1.5rem);
margin-top: 1em;
padding: 1em 0 1.5em;
position: relative;
width: 100%;
@ -426,7 +430,12 @@
.shoutCardDetailsItem {
align-items: center;
display: flex;
margin-right: 1.7em;
margin-right: 1.4em;
white-space: nowrap;
&:last-child {
margin-right: 0;
}
img {
vertical-align: middle;
@ -442,7 +451,8 @@
}
}
.shoutCardComments {
.shoutCardComments,
.shoutCardDetailsViewed {
align-items: center;
display: flex;
@ -459,6 +469,10 @@
}
}
.shoutCardComments {
@include font-size(1.2rem);
}
.shoutCardDetailsViewed {
.icon {
margin-top: -0.1em;

View File

@ -9,6 +9,8 @@ import { locale } from '../../stores/ui'
import { clsx } from 'clsx'
import { CardTopic } from './CardTopic'
import { RatingControl } from '../Article/RatingControl'
import { SharePopup } from '../Article/SharePopup'
import stylesHeader from '../Nav/Header.module.scss'
interface ArticleCardProps {
settings?: {
@ -161,37 +163,50 @@ export const ArticleCard = (props: ArticleCardProps) => {
<section class={styles.shoutCardDetails}>
<div class={styles.shoutCardDetailsContent}>
<RatingControl rating={stat?.rating} class={styles.shoutCardDetailsItem} />
<div
class={clsx(
styles.shoutCardDetailsItem,
styles.shoutCardDetailsViewed,
styles.shoutCardComments
)}
>
<Icon name="eye" class={styles.icon} />
<div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardDetailsViewed)}>
<Icon name="eye" class={clsx(styles.icon, styles.feedControlIcon)} />
{stat?.viewed}
</div>
<div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
<a href={`/${slug + '#comments' || ''}`}>
<Icon name="comment" class={styles.icon} />
{stat?.commented || ''}
<Icon name="comment" class={clsx(styles.icon, styles.feedControlIcon)} />
{stat?.commented || t('Add comment')}
</a>
</div>
<div class={styles.shoutCardDetailsItem}>
<button>
<Icon name="bookmark" class={styles.icon} />
</button>
</div>
<div class={styles.shoutCardDetailsItem}>
<button>
<Icon name="ellipsis" class={styles.icon} />
</button>
</div>
</div>
<button class={clsx('button--light', styles.shoutCardEditControl)}>{t('Collaborate')}</button>
<div class={styles.shoutCardDetailsContent}>
<div class={styles.shoutCardDetailsItem}>
<button>
<Icon name="pencil-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
</button>
</div>
<div class={styles.shoutCardDetailsItem}>
<button>
<Icon name="bookmark" class={clsx(styles.icon, styles.feedControlIcon)} />
</button>
</div>
<div class={styles.shoutCardDetailsItem}>
<SharePopup
containerCssClass={stylesHeader.control}
trigger={
<button>
<Icon name="share-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
</button>
}
/>
</div>
<div class={styles.shoutCardDetailsItem}>
<button>
<Icon name="ellipsis" class={clsx(styles.icon, styles.feedControlIcon)} />
</button>
</div>
</div>
</section>
</Show>
</div>

View File

@ -0,0 +1,60 @@
.counter {
align-items: center;
align-self: flex-start;
background: #f6f6f6;
border-radius: 0.8rem;
display: flex;
@include font-size(1.2rem);
font-weight: 500;
padding: 0.2em 0.5em;
}
.unread {
position: relative;
&::after {
background: #2638d9;
border-radius: 100%;
content: '';
display: inline-block;
height: 0.5em;
left: 100%;
margin-left: 0.3em;
position: absolute;
top: 0.5em;
width: 0.5em;
}
}
.settings {
display: flex;
justify-content: space-between;
}
a {
img {
transition: filter 0.3s;
}
&:hover {
img {
filter: invert(1);
}
}
}
.icon {
display: inline-block;
line-height: 1;
height: 2rem;
margin-right: 0.5em;
vertical-align: middle;
width: 2.2rem;
img {
height: 100%;
object-fit: contain;
object-position: center;
width: 100%;
}
}

View File

@ -7,6 +7,7 @@ import { useTopicsStore } from '../../stores/zine/topics'
import { useArticlesStore } from '../../stores/zine/articles'
import { useSeenStore } from '../../stores/zine/seen'
import { useSession } from '../../context/session'
import styles from './Sidebar.module.scss'
type FeedSidebarProps = {
authors: Author[]
@ -32,30 +33,54 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
<ul>
<li>
<a href="#">
<strong>Мои дискуссии</strong>
<Icon name="feed-all" class={styles.icon} />
<strong>общая лента</strong>
</a>
</li>
<li>
<a href="#">
<strong>Помощь сообществу</strong>
<Icon name="feed-my" class={styles.icon} />
моя лента
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<Icon name="feed-collaborate" class={styles.icon} />
соучастие
</a>
<span class={styles.counter}>7</span>
</li>
<li>
<a href="#">
<Icon name="feed-discussion" class={styles.icon} />
дискуссии
</a>
<span class={styles.counter}>18</span>
</li>
<li>
<a href="#">
<Icon name="feed-drafts" class={styles.icon} />
черновики
</a>
<span class={styles.counter}>283</span>
</li>
<li>
<a href="#">
<Icon name="bookmark" class={styles.icon} />
закладки
</a>
</li>
<li>
<a href="#">Редактирование</a>
<span class="counter">7</span>
</li>
<li>
<a href="#">Поделиться историей</a>
<span class="counter">18</span>
</li>
<li>
<a href="#">Проголосовать</a>
<span class="counter">283</span>
</li>
<li>
<a href="#">Подписки на форуме</a>
<a href="#">
<Icon name="feed-notifications" class={styles.icon} />
уведомления
</a>
</li>
</ul>
<ul>
<li>
<a href="/feed?by=subscribed">
@ -66,7 +91,10 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
<For each={session()?.news?.authors}>
{(authorSlug: string) => (
<li>
<a href={`/author/${authorSlug}`} classList={{ unread: checkAuthorIsSeen(authorSlug) }}>
<a
href={`/author/${authorSlug}`}
classList={{ [styles.unread]: checkAuthorIsSeen(authorSlug) }}
>
<small>@{authorSlug}</small>
{authorEntities()[authorSlug].name}
</a>
@ -77,7 +105,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
<For each={session()?.news?.topics}>
{(topicSlug: string) => (
<li>
<a href={`/author/${topicSlug}`} classList={{ unread: checkTopicIsSeen(topicSlug) }}>
<a href={`/author/${topicSlug}`} classList={{ [styles.unread]: checkTopicIsSeen(topicSlug) }}>
{topicEntities()[topicSlug]?.title}
</a>
</li>
@ -85,10 +113,10 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
</For>
</ul>
<div class="settings">
<div class={styles.settings}>
<a href="/feed/settings">
<strong>{t('Feed settings')}</strong>
<Icon name="settings" />
<Icon name="settings" class={styles.icon} />
{t('Feed settings')}
</a>
</div>
</>

View File

@ -0,0 +1,98 @@
.feedNavigation {
@include font-size(1.5rem);
font-weight: 500;
h4 {
font-size: inherit;
margin-bottom: 1.6rem;
}
ul,
li {
list-style: none;
padding: 0;
}
ul {
margin-bottom: 3rem;
}
li {
display: flex;
justify-content: space-between;
margin: 0 0 1rem;
a {
margin-right: 0.5em;
}
}
a {
border: none;
}
}
.feedAside {
h4 {
@include font-size(2.2rem);
font-weight: bold;
text-transform: lowercase;
}
}
.asideSection {
border: 1px solid #e9e9ee;
margin-bottom: 0.8em;
padding: 1em;
}
.topic {
background: transparentize(#2638d9, 0.95);
display: inline-block;
font-weight: bold;
margin: 0 0.5em 0.5em 0;
padding: 0.6em 1em;
position: relative;
vertical-align: middle;
&:hover {
background: #2638d9;
}
a {
position: static;
&:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
}
.pinnedLinks {
.icon {
height: 2.8rem;
width: 2.8rem;
}
ul {
@include font-size(1.4rem);
font-weight: bold;
margin: 1rem 0 0;
line-height: 1.4;
li {
&:last-child {
margin-bottom: 0;
}
}
}
a {
border: none;
}
}

View File

@ -14,6 +14,10 @@ import { useAuthorsStore } from '../../stores/zine/authors'
import { useTopicsStore } from '../../stores/zine/topics'
import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
import { useSession } from '../../context/session'
import stylesArticle from '../../styles/Article.module.scss'
import stylesTopic from '../Feed/CardTopic.module.scss'
import styles from './Feed.module.scss'
import { clsx } from 'clsx'
// const AUTHORSHIP_REACTIONS = [
// ReactionKind.Accept,
@ -71,9 +75,9 @@ export const FeedView = () => {
return (
<>
<div class="container feed">
<div class="wide-container feed">
<div class="row">
<div class="col-md-3 feed-navigation">
<div class={clsx('col-md-3', styles.feedNavigation)}>
<FeedSidebar authors={sortedAuthors()} />
</div>
@ -104,7 +108,7 @@ export const FeedView = () => {
<h4>{t('Popular authors')}</h4>
<a href="/authors">
{t('All authors')}
<Icon name="arrow-right" />
<Icon name="arrow-right" class={stylesBeside.icon} />
</a>
</div>
@ -124,21 +128,46 @@ export const FeedView = () => {
</Show>
</div>
<aside class="col-md-3">
<section class="feed-comments">
<aside class={clsx('col-md-3', styles.feedAside)}>
<section class={styles.asideSection}>
<h4>{t('Comments')}</h4>
<For each={topComments()}>
{(comment) => <Comment comment={comment} reactions={[]} compact={true} />}
</For>
<ul class={stylesArticle.comments}>
<For each={topComments()}>
{(comment) => <Comment comment={comment} reactions={[]} compact={true} />}
</For>
</ul>
</section>
<Show when={topTopics().length > 0}>
<section class="feed-topics">
<section class={styles.asideSection}>
<h4>{t('Topics')}</h4>
<For each={topTopics().slice(0, 5)}>
{(topic) => <TopicCard topic={topic} subscribeButtonBottom={true} />}
{(topic) => (
<span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
<a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
</span>
)}
</For>
</section>
</Show>
<section class={clsx(styles.asideSection, styles.pinnedLinks)}>
<Icon name="pin" class={styles.icon} />
<ul class="nodash">
<li>
<a href="/about/guide">Как устроен Дискурс</a>
</li>
<li>
<a href="/how-to-write-a-good-article">Как создать хороший текст</a>
</li>
<li>
<a href="#">Правила конструктивных дискуссий</a>
</li>
<li>
<a href="/about/principles">Принципы сообщества</a>
</li>
</ul>
</section>
</aside>
</div>
<Show when={isLoadMoreButtonVisible()}>

View File

@ -8,6 +8,7 @@
min-width: 144px;
opacity: 1;
position: absolute;
text-align: left;
top: calc(100% + 8px);
z-index: 100;

View File

@ -217,5 +217,7 @@
"slug is used by another user": "Имя уже занято другим пользователем",
"It does not look like url": "Это не похоже на ссылку",
"Something went wrong, please try again": "Что-то пошло не так, попробуйте еще раз",
"To write a comment, you must": "Чтобы написать комментарий, необходимо"
"To write a comment, you must": "Чтобы написать комментарий, необходимо",
"Add comment": "Комментировать",
"My subscriptions": "Подписки"
}

View File

@ -55,95 +55,6 @@
}
}
.feed-navigation {
@include font-size(1.7rem);
h4 {
font-size: inherit;
margin-bottom: 1.6rem;
}
ul,
li {
list-style: none;
margin: 0 0 1.6rem;
padding: 0;
}
ul {
border-bottom: 1px solid #e8e8e8;
}
li {
display: flex;
justify-content: space-between;
a {
margin-right: 0.5em;
}
}
a {
border: none;
}
.counter {
align-items: center;
align-self: flex-start;
background: #f6f6f6;
color: #6b7280;
display: flex;
@include font-size(1.2rem);
font-weight: 500;
padding: 0.2em 0.5em;
}
.unread {
position: relative;
&::after {
background: #2638d9;
border-radius: 100%;
content: '';
display: inline-block;
height: 0.5em;
left: 100%;
margin-left: 0.3em;
position: absolute;
top: 0.5em;
width: 0.5em;
}
}
.settings {
display: flex;
justify-content: space-between;
img {
transition: filter 0.3s;
}
a {
margin-right: 0.3em;
&:hover {
img {
filter: invert(1);
}
}
}
.icon {
display: inline-block;
line-height: 1;
margin-left: 0.3em;
vertical-align: middle;
width: 1em;
}
}
}
.feed-filter {
display: flex;
@include font-size(1.7rem);