1. Shlomi Fish
  2. shlomi-fish-homepage

Commits

Shlomi Fish  committed d9535c0

Convert the buttons to simple SVG arrows.

Currently, they are not very attractive but that can work. The motivation is
to eventually reduce the width of the section navigation menu.

  • Participants
  • Parent commits e40c707
  • Branches default

Comments (0)

Files changed (5)

File Makefile

View file
 
 DOCS_COMMON_DEPS = template.wml lib/MyNavData.pm
 
-all: make-dirs docbook_targets fortunes-target latemp_targets css_targets sitemap_targets copy_fortunes site-source-install presentations_targets lc_pres_targets art_slogans_targets graham_func_pres_targets mojo_pres hhgg_convert lib/MathJax/README.md mathjax_dest plaintext_scripts_with_offending_extensions
+all: make-dirs docbook_targets fortunes-target latemp_targets css_targets sitemap_targets copy_fortunes site-source-install presentations_targets lc_pres_targets art_slogans_targets graham_func_pres_targets mojo_pres hhgg_convert lib/MathJax/README.md mathjax_dest plaintext_scripts_with_offending_extensions svg_nav_images
 
 include lib/make/gmsl/gmsl
 
 
 $(SCRIPTS_WITH_OFFENDING_EXTENSIONS_TARGETS): $(T2_DEST)/%-pl.txt: $(T2_SRC_DIR)/%.pl
 	cp -f $< $@
+
+SVG_NAV_IMAGES = \
+	$(T2_DEST)/images/sect-arr-left-disabled.svg \
+	$(T2_DEST)/images/sect-arr-left-pressed.svg \
+	$(T2_DEST)/images/sect-arr-left.svg \
+	$(T2_DEST)/images/sect-arr-right-disabled.svg \
+	$(T2_DEST)/images/sect-arr-right-pressed.svg \
+	$(T2_DEST)/images/sect-arr-right.svg \
+	$(T2_DEST)/images/sect-arr-up-disabled.svg \
+	$(T2_DEST)/images/sect-arr-up-pressed.svg \
+	$(T2_DEST)/images/sect-arr-up.svg
+
+
+svg_nav_images: $(SVG_NAV_IMAGES)
+
+$(SVG_NAV_IMAGES): lib/images/navigation/section/sect-nav-arrows.pl
+	perl $<

File common/js/selfl.js

View file
         $("body").addClass(myclass);
     }
 }
+
+$(function() {
+    $(".sub_menu ul.nav_links li a img").mouseover(function() {
+            var src = $(this).attr("src").replace(/\.svg$/, "-pressed.svg");
+            $(this).attr("src", src);
+        })
+        .mouseout(function() {
+            var src = $(this).attr("src").replace("-pressed.svg", ".svg");
+            $(this).attr("src", src);
+        });
+});

File lib/Shlomif/Homepage/SectionMenu.pm

View file
 
 sub get_image_base
 {
-    return 'sect-arrow-';
+    return 'sect-arr-';
 }
 
 package Shlomif::Homepage::SectionMenu;
     my $self = shift;
 
     return Shlomif::Homepage::SectionMenu::NavLinks->new(
+        ext => '.svg',
         nav_links => $self->results()->{nav_links},
         nav_links_obj => $self->results()->{nav_links_obj},
         root => $self->root(),

File lib/images/navigation/section/sect-nav-arrows.pl

View file
 use SVG;
 use IO::All;
 
-my $width = 100;
-my $height = 100;
+my $dim = 30;
+my $width = $dim;
+my $height = $dim;
 
 
-foreach my $rotation (
+foreach my $button_style (
     {
-        basename => 'l',
-    },
-    {
-        basename => 'u',
-        rot => 90,
-    },
-    {
-        basename => 'r',
-        rot => 180,
-    }
-)
-{
-    my $basename = $rotation->{basename};
-
-    my $svg = SVG->new(width => $width, height => $height);
-    my $group1 = $svg->group(
-        id=>'group1',
-        style => {stroke => 'black', fill => 'black',},
-        exists($rotation->{rot}) ? (transform => "rotate($rotation->{rot} @{[$width/2]} @{[$height/2]})") : (),
-    );
-
-    my $points = $group1->get_path(
-        x => [0, $width, $width],
-        y => [$height/2, 0, $height],
-        -type => 'polyline',
-        -closed => 'true',
-    );
-
-    my $tag = $group1->polyline(
-        %$points,
-        id => 'arrow1',
+        basename => '',
         style => {
             stroke => 'black',
             fill => 'black',
         },
-    );
-    io->file("./common/images/sect-arr-$basename.svg")->print($svg->xmlify());
+    },
+    {
+        basename => '-disabled',
+        style => {
+            stroke => '#808080',
+            fill => '#909090',
+        },
+    },
+    {
+        basename => '-pressed',
+        style => {
+            'stroke-width' => '2pt',
+            stroke => 'red',
+            fill => 'orange',
+        },
+    },
+)
+{
+    my $button_basename = $button_style->{basename};
+
+    foreach my $rotation (
+        {
+            basename => 'left',
+        },
+        {
+            basename => 'up',
+            rot => 90,
+        },
+        {
+            basename => 'right',
+            rot => 180,
+        }
+    )
+    {
+        my $basename = $rotation->{basename};
+
+        my $svg = SVG->new(width => $width, height => $height);
+        my $group1 = $svg->group(
+            id=>'group1',
+            style => {stroke => 'black', fill => 'black',},
+            exists($rotation->{rot}) ? (transform => "rotate($rotation->{rot} @{[$width/2]} @{[$height/2]})") : (),
+        );
+
+        my $xs = [0, $width, $width];
+        my $ys = [$height/2, 0, $height];
+        foreach my $ref ($xs, $ys)
+        {
+            push @$ref, $ref->[0];
+        }
+        my $points = $group1->get_path(
+            x => $xs,
+            y => $ys,
+            -type => 'polyline',
+            -closed => 'true',
+        );
+
+        my $tag = $group1->polyline(
+            %$points,
+            id => 'arrow1',
+            style => {
+                'stroke-linejoin' => 'round',
+                %{$button_style->{style}},
+            },
+        );
+        io->file("./dest/t2-homepage/images/sect-arr-$basename$button_basename.svg")->print($svg->xmlify());
+    }
 }
-

File lib/sass/style.sass

View file
     -webkit-border-radius: 10px
     border-radius: 10px
 
+    .nav_links img:hover, .nav_links a
+        background: transparent
+
 .banner
     height: 80px
     background-color: white