nupplaPhil/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

update contact request $ confirmation graphics

Browse source
This commit is contained in:
rabuzarus 2016-11-29 16:00:07 +01:00
parent 6c0bc15ecb
commit a68735b725
4 changed files with 43 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
spec/dfrn2_contact_confirmation.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 241 KiB

After

Width:  |  Height:  |  Size: 245 KiB

33
spec/dfrn2_contact_confirmation.svg
View file

@ -90,14 +90,15 @@ text { font:12px Dialog; }
<text x="1055" y="1825" style="font:13px Open Sans">is prensent it is a duplicate)</text>
<text x="1055" y="1871" style="font:13px Open Sans">- update dfrn-id and pubkey for Karens contact entry in the </text>
<text x="1055" y="1894" style="font:13px Open Sans">contact table</text>
<clipPath id="clip12"><path d="M144,1852 L455,1852 L455,1894 L144,1894 L144,1852 Z" /></clipPath>
<path d="M153,1853 C148.5820313,1853 145,1856.5820313 145,1861 L145,1884 C145,1888.4179688 148.5820313,1892 153,1892 L445,1892 C449.4179688,1892 453,1888.4179688 453,1884 L453,1861 C453,1856.5820313 449.4179688,1853 445,1853 Z" style="fill:rgb(255,255,3);stroke:none" clip-path="url(#clip12)" />
<text x="159" y="1875" style="font:13px Open Sans"> -&gt; set the relation for the contact</text>
<clipPath id="clip12"><path d="M42,1841 L559,1841 L559,1906 L42,1906 L42,1841 Z" /></clipPath>
<path d="M51,1842 C46.5820313,1842 43,1845.5820313 43,1850 L43,1896 C43,1900.4179688 46.5820313,1904 51,1904 L549,1904 C553.4179688,1904 557,1900.4179688 557,1896 L557,1850 C557,1845.5820313 553.4179688,1842 549,1842 Z" style="fill:rgb(255,255,3);stroke:none" clip-path="url(#clip12)" />
<text x="57" y="1864" style="font:13px Open Sans"> -&gt; set the relation for the contact and set pending = 0 and </text>
<text x="57" y="1887" style="font:13px Open Sans">blocked = 0</text>
<clipPath id="clip13"><path d="M1128,1950 L1541,1950 L1541,2061 L1128,2061 L1128,1950 Z" /></clipPath>
<path d="M1137,1951 C1132.5820313,1951 1129,1954.5820313 1129,1959 L1129,2051 C1129,2055.4179688 1132.5820313,2059 1137,2059 L1531,2059 C1535.4179688,2059 1539,2055.4179688 1539,2051 L1539,1959 C1539,1954.5820313 1535.4179688,1951 1531,1951 Z" style="fill:rgb(255,255,3);stroke:none" clip-path="url(#clip13)" />
<text x="1142" y="1973" style="font:13px Open Sans">- update the relationship of the contact Karen</text>
<text x="1142" y="2019" style="font:13px Open Sans">-&gt; if duplex delete the issued-id</text>
<text x="1142" y="2042" style="font:13px Open Sans">-&gt; set pending to 0</text>
<text x="1142" y="2042" style="font:13px Open Sans">-&gt; set blocked = 0 and pending = 0</text>
<clipPath id="clip14"><path d="M1241,2117 L1428,2117 L1428,2159 L1241,2159 L1241,2117 Z" /></clipPath>
<path d="M1250,2118 C1245.5820313,2118 1242,2121.5820313 1242,2126 L1242,2149 C1242,2153.4179688 1245.5820313,2157 1250,2157 L1418,2157 C1422.4179688,2157 1426,2153.4179688 1426,2149 L1426,2126 C1426,2121.5820313 1422.4179688,2118 1418,2118 Z" style="fill:rgb(255,255,3);stroke:none" clip-path="url(#clip14)" />
<text x="1255" y="2140" style="font:13px Open Sans">send a notification</text>
@ -134,12 +135,12 @@ text { font:12px Dialog; }
<path d="M1039.1210938,1352.2304688 L1042,1342.65625 L1032.265625,1344.9492188 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip27)" />
<clipPath id="clip28"><path d="M588,1338 L1046,1338 L1046,1770 L588,1770 L588,1338 Z" /></clipPath>
<path d="M1039.1210938,1352.2304688 L1042,1342.65625 L1032.265625,1344.9492188 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip28)" />
<clipPath id="clip29"><path d="M262,1792 L337,1792 L337,1857 L262,1857 L262,1792 Z" /></clipPath>
<path d="M299.5546875,1796 L299.15625,1853" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip29)" />
<clipPath id="clip30"><path d="M262,1792 L337,1792 L337,1857 L262,1857 L262,1792 Z" /></clipPath>
<path d="M294.2148438,1844.3046875 L299.15625,1853 L304.2148438,1844.375 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip30)" />
<clipPath id="clip31"><path d="M262,1792 L337,1792 L337,1857 L262,1857 L262,1792 Z" /></clipPath>
<path d="M294.2148438,1844.3046875 L299.15625,1853 L304.2148438,1844.375 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip31)" />
<clipPath id="clip29"><path d="M263,1792 L338,1792 L338,1846 L263,1846 L263,1792 Z" /></clipPath>
<path d="M300.4296875,1796 L300.1992188,1842" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip29)" />
<clipPath id="clip30"><path d="M263,1792 L338,1792 L338,1846 L263,1846 L263,1792 Z" /></clipPath>
<path d="M295.2421875,1833.3164063 L300.1992188,1842 L305.2421875,1833.3632813 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip30)" />
<clipPath id="clip31"><path d="M263,1792 L338,1792 L338,1846 L263,1846 L263,1792 Z" /></clipPath>
<path d="M295.2421875,1833.3164063 L300.1992188,1842 L305.2421875,1833.3632813 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip31)" />
<clipPath id="clip32"><path d="M1295,1907 L1370,1907 L1370,1955 L1295,1955 L1295,1907 Z" /></clipPath>
<path d="M1332.9140625,1911 L1333.4453125,1951" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip32)" />
<clipPath id="clip33"><path d="M1295,1907 L1370,1907 L1370,1955 L1295,1955 L1295,1907 Z" /></clipPath>
@ -152,10 +153,10 @@ text { font:12px Dialog; }
<path d="M1329,2109.3398438 L1334,2118 L1339,2109.3398438 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip36)" />
<clipPath id="clip37"><path d="M1296,2055 L1371,2055 L1371,2122 L1296,2122 L1296,2055 Z" /></clipPath>
<path d="M1329,2109.3398438 L1334,2118 L1339,2109.3398438 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip37)" />
<clipPath id="clip38"><path d="M262,1888 L337,1888 L337,1942 L262,1942 L262,1888 Z" /></clipPath>
<path d="M299.2265625,1892 L299.3828125,1938" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip38)" />
<clipPath id="clip39"><path d="M262,1888 L337,1888 L337,1942 L262,1942 L262,1888 Z" /></clipPath>
<path d="M294.3554688,1929.3554688 L299.3828125,1938 L304.3554688,1929.3242188 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip39)" />
<clipPath id="clip40"><path d="M262,1888 L337,1888 L337,1942 L262,1942 L262,1888 Z" /></clipPath>
<path d="M294.3554688,1929.3554688 L299.3828125,1938 L304.3554688,1929.3242188 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip40)" />
<clipPath id="clip38"><path d="M263,1900 L338,1900 L338,1942 L263,1942 L263,1900 Z" /></clipPath>
<path d="M300,1904 L299.6171875,1938" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip38)" />
<clipPath id="clip39"><path d="M263,1900 L338,1900 L338,1942 L263,1942 L263,1900 Z" /></clipPath>
<path d="M294.7148438,1929.2851563 L299.6171875,1938 L304.7148438,1929.3984375 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip39)" />
<clipPath id="clip40"><path d="M263,1900 L338,1900 L338,1942 L263,1942 L263,1900 Z" /></clipPath>
<path d="M294.7148438,1929.2851563 L299.6171875,1938 L304.7148438,1929.3984375 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip40)" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
spec/dfrn2_contact_request.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 314 KiB

After

Width:  |  Height:  |  Size: 317 KiB

52
spec/dfrn2_contact_request.svg
View file

@ -44,7 +44,7 @@ text { font:12px Dialog; }
<text x="904" y="1291" style="font:13px Open Sans">- otherwise if Bob is not already in the contact table scrape </text>
<text x="904" y="1314" style="font:13px Open Sans">Bobs profile and create a new contact with this data (e.g. </text>
<text x="904" y="1337" style="font:13px Open Sans">the scraped issued-id / profiles pubkey becomes contacts </text>
<text x="904" y="1360" style="font:13px Open Sans">site-pubkey) in the contact table</text>
<text x="904" y="1360" style="font:13px Open Sans">site-pubkey) in the contact table (blocked = 1, pending = 1)</text>
<text x="904" y="1406" style="font:13px Open Sans">- select this created contact from contact table and create </text>
<text x="904" y="1429" style="font:13px Open Sans">an intro in the intro table (blocked = 1)</text>
<clipPath id="clip9"><path d="M925,693 L1374,693 L1374,735 L925,735 L925,693 Z" /></clipPath>
@ -65,8 +65,8 @@ text { font:12px Dialog; }
<clipPath id="clip11"><path d="M287,1180 L464,1180 L464,1222 L287,1222 L287,1180 Z" /></clipPath>
<path d="M296,1181 C291.5820313,1181 288,1184.5820313 288,1189 L288,1212 C288,1216.4179688 291.5820313,1220 296,1220 L454,1220 C458.4179688,1220 462,1216.4179688 462,1212 L462,1189 C462,1184.5820313 458.4179688,1181 454,1181 Z" style="fill:rgb(127,127,127);stroke:none" clip-path="url(#clip11)" />
<text x="302" y="1203" style="font:13px Open Sans">dfrn_request.php</text>
<clipPath id="clip12"><path d="M134,1399 L625,1399 L625,2315 L134,2315 L134,1399 Z" /></clipPath>
<path d="M143,1400 C138.5820313,1400 135,1403.5820313 135,1408 L135,2305 C135,2309.4179688 138.5820313,2313 143,2313 L615,2313 C619.4179688,2313 623,2309.4179688 623,2305 L623,1408 C623,1403.5820313 619.4179688,1400 615,1400 Z" style="fill:rgb(255,255,3);stroke:none" clip-path="url(#clip12)" />
<clipPath id="clip12"><path d="M134,1399 L624,1399 L624,2315 L134,2315 L134,1399 Z" /></clipPath>
<path d="M143,1400 C138.5820313,1400 135,1403.5820313 135,1408 L135,2305 C135,2309.4179688 138.5820313,2313 143,2313 L614,2313 C618.4179688,2313 622,2309.4179688 622,2305 L622,1408 C622,1403.5820313 618.4179688,1400 614,1400 Z" style="fill:rgb(255,255,3);stroke:none" clip-path="url(#clip12)" />
<text x="149" y="1422" style="font:13px Open Sans">http://example.com/dfrn_request/bob?</text>
<text x="149" y="1445" style="font:13px Open Sans">dfrn_url=</text>
<text x="149" y="1468" style="font:13px Open Sans">687474703a2f2f6b6172656e686f6d65706167652e</text>
@ -91,8 +91,8 @@ text { font:12px Dialog; }
<text x="149" y="2043" style="font:13px Open Sans">tabel, scrape Karens profile page to pick up the dfrn </text>
<text x="149" y="2066" style="font:13px Open Sans">links, key, fn, and photo</text>
<text x="149" y="2112" style="font:13px Open Sans">- create a contact for Karen in the contact table with </text>
<text x="149" y="2135" style="font:13px Open Sans">the scraped data (Karens pubkey becomes the contact </text>
<text x="149" y="2158" style="font:13px Open Sans">site-pubkey)</text>
<text x="149" y="2135" style="font:13px Open Sans">the scraped data with blocked = 1 and pending = 1 </text>
<text x="149" y="2158" style="font:13px Open Sans">(Karens pubkey becomes the contact site-pubkey)</text>
<text x="149" y="2204" style="font:13px Open Sans">- fetch_url($dfrn_request . '?confirm_key=' . </text>
<text x="149" y="2227" style="font:13px Open Sans">$confirm_key);</text>
<text x="149" y="2273" style="font:13px Open Sans">- fetch_url(http://karenhomepage.com/dfrn_request?</text>
@ -166,26 +166,26 @@ text { font:12px Dialog; }
<path d="M471.8515625,1207.0664063 L462,1205.3515625 L465.4414063,1214.7421875 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip35)" />
<text x="576" y="1385" style="font:10px Georgia">redirict to bobs dfrn_request page</text>
<clipPath id="clip36"><path d="M339,1216 L414,1216 L414,1404 L339,1404 L339,1216 Z" /></clipPath>
<path d="M375.1171875,1220 L376.2148438,1400" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip36)" />
<path d="M375.1171875,1220 L376.0625,1400" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip36)" />
<clipPath id="clip37"><path d="M339,1216 L414,1216 L414,1404 L339,1404 L339,1216 Z" /></clipPath>
<path d="M371.1601563,1391.3710938 L376.2148438,1400 L381.1601563,1391.3085938 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip37)" />
<path d="M371.015625,1391.3671875 L376.0625,1400 L381.015625,1391.3125 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip37)" />
<clipPath id="clip38"><path d="M339,1216 L414,1216 L414,1404 L339,1404 L339,1216 Z" /></clipPath>
<path d="M371.1601563,1391.3710938 L376.2148438,1400 L381.1601563,1391.3085938 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip38)" />
<clipPath id="clip39"><path d="M619,2024 L1072,2024 L1072,2159 L619,2159 L619,2024 Z" /></clipPath>
<path d="M623,2306.5664063 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip39)" />
<clipPath id="clip40"><path d="M619,2175 L1072,2175 L1072,2310 L619,2310 L619,2175 Z" /></clipPath>
<path d="M623,2306.5664063 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip40)" />
<clipPath id="clip41"><path d="M619,2157 L651,2157 L651,2177 L619,2177 L619,2157 Z" /></clipPath>
<path d="M623,2306.5664063 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip41)" />
<clipPath id="clip42"><path d="M1042,2157 L1072,2157 L1072,2177 L1042,2177 L1042,2157 Z" /></clipPath>
<path d="M623,2306.5664063 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip42)" />
<clipPath id="clip43"><path d="M649,2157 L1044,2157 L1044,2177 L649,2177 L649,2157 Z" /></clipPath>
<path d="M623,2306.5664063 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);opacity:0.09803921568627451;stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip43)" />
<clipPath id="clip44"><path d="M619,2024 L1072,2024 L1072,2310 L619,2310 L619,2024 Z" /></clipPath>
<path d="M1063.5117188,2036.8320313 L1068.1992188,2028 L1058.2070313,2028.3554688 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip44)" />
<clipPath id="clip45"><path d="M619,2024 L1072,2024 L1072,2310 L619,2310 L619,2024 Z" /></clipPath>
<path d="M1063.5117188,2036.8320313 L1068.1992188,2028 L1058.2070313,2028.3554688 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip45)" />
<text x="652" y="2169" style="font:10px Georgia">http://karenhomepage.com/dfrn_request?confirm_key=”ABC123”</text>
<path d="M371.015625,1391.3671875 L376.0625,1400 L381.015625,1391.3125 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip38)" />
<clipPath id="clip39"><path d="M618,2024 L1072,2024 L1072,2158 L618,2158 L618,2024 Z" /></clipPath>
<path d="M622,2305.015625 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip39)" />
<clipPath id="clip40"><path d="M618,2174 L1072,2174 L1072,2309 L618,2309 L618,2174 Z" /></clipPath>
<path d="M622,2305.015625 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip40)" />
<clipPath id="clip41"><path d="M618,2156 L650,2156 L650,2176 L618,2176 L618,2156 Z" /></clipPath>
<path d="M622,2305.015625 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip41)" />
<clipPath id="clip42"><path d="M1041,2156 L1072,2156 L1072,2176 L1041,2176 L1041,2156 Z" /></clipPath>
<path d="M622,2305.015625 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip42)" />
<clipPath id="clip43"><path d="M648,2156 L1043,2156 L1043,2176 L648,2176 L648,2156 Z" /></clipPath>
<path d="M622,2305.015625 L1068.1992188,2028" style="fill:none;stroke:rgb(182,44,37);opacity:0.09803921568627451;stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip43)" />
<clipPath id="clip44"><path d="M618,2024 L1072,2024 L1072,2309 L618,2309 L618,2024 Z" /></clipPath>
<path d="M1063.4804688,2036.8164063 L1068.1992188,2028 L1058.2070313,2028.3203125 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip44)" />
<clipPath id="clip45"><path d="M618,2024 L1072,2024 L1072,2309 L618,2309 L618,2024 Z" /></clipPath>
<path d="M1063.4804688,2036.8164063 L1068.1992188,2028 L1058.2070313,2028.3203125 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip45)" />
<text x="651" y="2168" style="font:10px Georgia">http://karenhomepage.com/dfrn_request?confirm_key=”ABC123”</text>
<clipPath id="clip46"><path d="M1111,2063 L1186,2063 L1186,2210 L1111,2210 L1111,2063 Z" /></clipPath>
<path d="M1149.0703125,2067 L1149.5625,2206" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip46)" />
<clipPath id="clip47"><path d="M1111,2063 L1186,2063 L1186,2210 L1111,2210 L1111,2063 Z" /></clipPath>
@ -193,11 +193,11 @@ text { font:12px Dialog; }
<clipPath id="clip48"><path d="M1111,2063 L1186,2063 L1186,2210 L1111,2210 L1111,2063 Z" /></clipPath>
<path d="M1144.53125,2197.359375 L1149.5625,2206 L1154.53125,2197.3203125 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip48)" />
<clipPath id="clip49"><path d="M342,2309 L417,2309 L417,2429 L342,2429 L342,2309 Z" /></clipPath>
<path d="M379,2313 L378.5351563,2425" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip49)" />
<path d="M378.875,2313 L378.5351563,2425" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip49)" />
<clipPath id="clip50"><path d="M342,2309 L417,2309 L417,2429 L342,2429 L342,2309 Z" /></clipPath>
<path d="M373.5703125,2416.3203125 L378.5351563,2425 L383.5703125,2416.359375 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip50)" />
<path d="M373.5625,2416.3242188 L378.5351563,2425 L383.5625,2416.3554688 Z" style="fill:rgb(182,44,37);stroke:none" clip-path="url(#clip50)" />
<clipPath id="clip51"><path d="M342,2309 L417,2309 L417,2429 L342,2429 L342,2309 Z" /></clipPath>
<path d="M373.5703125,2416.3203125 L378.5351563,2425 L383.5703125,2416.359375 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip51)" />
<path d="M373.5625,2416.3242188 L378.5351563,2425 L383.5625,2416.3554688 Z" style="fill:none;stroke:rgb(182,44,37);stroke-width:3" clip-path="url(#clip51)" />
<clipPath id="clip52"><path d="M1111,445 L1186,445 L1186,496 L1111,496 L1111,445 Z" /></clipPath>
<path d="M1148.7851563,449 L1149.3125,492" style="fill:none;stroke:rgb(182,44,37);stroke-width:3;stroke-dasharray:18,9;stroke-dashoffset:0" clip-path="url(#clip52)" />
<clipPath id="clip53"><path d="M1111,445 L1186,445 L1186,496 L1111,496 L1111,445 Z" /></clipPath>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB